微信小程序開發之選項卡

選項卡是web開發中經常使用到的一個模塊，在小程序中竟然沒有，這里參考別人的文章自己做了一個雙選項卡

實現思路：

通過綁定swichNav事件來控制currentTab(當前選項卡)和isShow(是否顯示)，達到切換展示電影和游戲的目的

代碼：

1.index.wxml

<!--index.wxml-->
<view class="swiper-tab">
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">電影</view>
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">游戲</view>
</view>

<view class="weui-cells__title" hidden="{{!isShow}}">電影列表</view>
<view class="weui-cells__title" hidden="{{isShow}}">游戲列表</view>

 

2.index.wxss

.swiper-tab {
  width: 100%;
  text-align: center;
  line-height: 80rpx;
  background-color:white;
}

.swiper-tab-list {
  font-size: 30rpx;
  display: inline-block;
  width: 50%;
  color: #777;
  border-bottom: 0rpx;
}

.on {
  color: #da7c0c;
  border-bottom: 2rpx solid #da7c0c;
}

.swiper-box {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.swiper-box view {
  text-align: center;
}

3.index.js

//index.js
//獲取應用實例
var app = getApp()
Page( {
  data: {
    isShow: true,
    currentTab: 0,
  },
   
    swichNav: function (e) {
        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else { 
            var showMode = e.target.dataset.current == 0;
            this.setData({
                currentTab: e.target.dataset.current,
                isShow: showMode
            })
        }
    },
})

 

 

參考文章：http://blog.csdn.net/qq_31383345/article/details/52900835

 

歡迎閱讀本系列文章：微信小程序開發教程目錄