接着上文继续~（上文地址：https://www.jianshu.com/p/64c2ca4f1d92）
要完成的页面效果：
tab切换.gif
一、 "正在热映"与"即将上映"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等，区别在于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当中的值，与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可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。比如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1px = 2rpx;
采用flex布局，由于电影列表会向下翻页，tab导航设置position:fixed;固定布局， "正在热映"与"即将上映"宽度各占50%。
未完待续，接着会调用豆瓣接口获取电影列表~
如果文中有什么不对的或者需要注意的地方欢迎大家指正，一起分享交流~
接下文 微信小程序仿豆瓣电影页面demo（3）--获取电影列表：
https://www.jianshu.com/p/4734a162ccff
本文著作权归作者所有，如需转载，请联系本人并标明出处及原链接。
