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綁定點(diǎn)擊事件控制顯示與隱藏，tap表示手指觸摸后馬上離開， 綁定事件的key以bind或catch開頭，然后跟上事件的類型，如bindtap、catchtap等，區(qū)別在于bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡，可以自己寫個(gè)小demo測(cè)試下。微信小程序事件詳見官方文檔：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當(dāng)中的值，與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可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。比如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1px = 2rpx;
采用flex布局，由于電影列表會(huì)向下翻頁，tab導(dǎo)航設(shè)置position:fixed;固定布局， "正在熱映"與"即將上映"寬度各占50%。

未完待續(xù)，接著會(huì)調(diào)用豆瓣接口獲取電影列表~
如果文中有什么不對(duì)的或者需要注意的地方歡迎大家指正，一起分享交流~
接下文 微信小程序仿豆瓣電影頁面demo（3）--獲取電影列表：
http://www.itdecent.cn/p/4734a162ccff

本文著作權(quán)歸作者所有，如需轉(zhuǎn)載，請(qǐng)聯(lián)系本人并標(biāo)明出處及原鏈接。