小程序tab切換

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">
    <swiper-item>
        <view>黨章黨規</view>
    </swiper-item>
    <swiper-item>
        <view>人才政策</view>
    </swiper-item>
    <swiper-item>
        <view>科創聯盟</view>
    </swiper-item>
    <swiper-item>
        <view>入黨那一天</view>
    </swiper-item>
</swiper>

WXSS

.swiper-tab{
  width: 100%;
  text-align: center;
  line-height: 70rpx;
  display: flex;
  justify-content: space-around;
  padding-bottom: 12rpx;
  border-bottom: 2rpx solid rgba(187, 187, 187, 1);
}
.swiper-tab-list{  
  font-size: 30rpx;
  display: inline-block;
  color: #777777;
  font-weight: bold;
  font-size: 28rpx;

}
.on{ 
  color: #1890FF;
  border-bottom: 6rpx solid #1890FF;
}

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

 JS

Page({
  data: {
      winWidth: 0,
      winHeight: 0,
      currentTab: 0,
  },
  onLoad: function() {

      var that = this;

      /**
       * 獲取當前設備的寬高
       */
      wx.getSystemInfo( {

          success: function( res ) {
              that.setData( {
                  winWidth: res.windowWidth,
                  winHeight: res.windowHeight
              });
          }

      });
  },
    
//  tab切換邏輯
  swichNav: function( e ) {

      var that = this;

      if( this.data.currentTab === e.target.dataset.current ) {
          return false;
      } else {
          that.setData( {
              currentTab: e.target.dataset.current
          })
      }
  },

  bindChange: function( e ) {

      var that = this;
      that.setData( { currentTab: e.detail.current });

  },
})

效果圖

---

《劇終》 。。。