接着上文继续~(上文地址: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
本文著作权归作者所有,如需转载,请联系本人并标明出处及原链接。
网友评论