小程序上方tobar切換不同頁面

效果圖

核心代碼

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 class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">稿酬</view>
    <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">特許權使用費</view>   
  </view>  
  <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

wxss

.swiper-tab{  
    width: 100%;  
    border-bottom: 2rpx solid #777777;  
    text-align: center;  
    line-height: 80rpx;}  
.swiper-tab-list{  font-size: 23rpx;  
    display: inline-block;  
    width: 25%;  
    color: #777777;  
}  
.on{ color: #1CC88A;  
    border-bottom: 5rpx solid #1CC88A;}  
  
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  
.swiper-box view{  
    text-align: center;  
}

js

  /** 
     * 滑動切換tab 
     */
  bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
  /** 
   * 點擊tab切換 
   */
  swichNav: function (e) {
    var that = this;
    console.log(e.target.dataset.current)
    if (this.data.currentTab == e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },

具體效果可見