微信小程序 swiper制作tab切换实现附源码

<view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Seside2</view> <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Seside3</view></view><swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> <swiper-item>  <view>Seside1</view> </swiper-item> <swiper-item>  <view>Seside2</view> </swiper-item> <swiper-item>  <view>Seside3</view> </swiper-item></swiper>

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

//index.js //获取应用实例 var app = getApp() Page( {  data: {   // 页面配置    winWidth: 0,   winHeight: 0,   // tab切换   currentTab: 0,  },  onLoad: function() {   var that = this;   // 获取系统信息   wx.getSystemInfo( {    success: function( res ) {     that.setData( {      winWidth: res.windowWidth,      winHeight: res.windowHeight     });    }   });  },  // 滑动切换tab  bindChange: function( e ) {   var that = this;   that.setData( { currentTab: e.detail.current });  },  // 点击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    })   }  } })