接著上文繼續(xù)~（上文地址：http://www.reibang.com/p/64c2ca4f1d92）
要完成的頁面效果：
一、 "正在熱映"與"即將上映"tab切換
- 編輯home.wxml文件：
<view class="page">
<view class="nav">
<view class="{{homeSelected?'current':'default'}}" bindtap="handleHomeSelected">正在熱映</view>
<view class="{{comingSelected?'current':'default'}}" bindtap="handleComingSelected">即將上映</view>
</view>
<view class="{{homeSelected?'show':'hidden'}}">
<view class="nav-text">正在熱映</view>
</view>
<view class="{{comingSelected?'show':'hidden'}}">
<view class="nav-text">即將</view>
</view>
</view>
通過bindtap綁定點擊事件控制顯示與隱藏，tap表示手指觸摸后馬上離開籍凝， 綁定事件的key以bind或catch開頭骡和，然后跟上事件的類型，如bindtap崭参、catchtap等呵曹，區(qū)別在于bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡何暮，可以自己寫個小demo測試下奄喂。微信小程序事件詳見官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
- 編輯home.js文件
Page({
data: {
homeSelected:true,
comingSelected:false
},
handleHomeSelected(e){
this.setData({
homeSelected: true,
comingSelected: false
})
},
handleComingSelected(e) {
this.setData({
homeSelected: false,
comingSelected: true
})
}
})
在data中定義homeSelected與comingSelected屬性，初始化homeSelected為true(即選中正在熱映)海洼；綁定事件中通過this.setData({ //... })方式改變data當(dāng)中的值跨新，與react寫法相似。
- 編輯home.wxss樣式文件
.nav{
width:100%;
height:80rpx;
display:flex;
position:fixed;
top:0;
left:0;
background-color: #ffffff;
z-index: 999;
}
.default,.current{
height:100%;
line-height:80rpx;
width:50%;
text-align:center;
border-bottom:1px solid #dfdfdf;
}
.current{
border-bottom:2px solid #000000;
}
.show{
display:block;
}
.hidden{
display:none;
}
.nav-text{
margin-top:80rpx;
}
rpx單位是微信小程序中css的尺寸單位坏逢，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)域帐。規(guī)定屏幕寬為750rpx赘被。比如在 iPhone6 上，屏幕寬度為375px肖揣，共有750個物理像素民假，則750rpx = 375px = 750物理像素，1px = 2rpx;
采用flex布局龙优，由于電影列表會向下翻頁羊异，tab導(dǎo)航設(shè)置position:fixed;固定布局， "正在熱映"與"即將上映"寬度各占50%陋率。
未完待續(xù)球化，接著會調(diào)用豆瓣接口獲取電影列表~
如果文中有什么不對的或者需要注意的地方歡迎大家指正，一起分享交流~
接下文 微信小程序仿豆瓣電影頁面demo（3）--獲取電影列表：
http://www.reibang.com/p/4734a162ccff
本文著作權(quán)歸作者所有瓦糟，如需轉(zhuǎn)載筒愚，請聯(lián)系本人并標(biāo)明出處及原鏈接。
