tab切换.gif

一、 "正在热映"与"即将上映"tab切换

1. 编辑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

2. 编辑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写法相似。

3. 编辑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

本文著作权归作者所有，如需转载，请联系本人并标明出处及原链接。