wxml中关键代码:

<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>

js代码:

//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
     })
   }
 }
})

css代码：

.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;
 margin-right: 4%;
  margin-left: 4%;
}
.on{
 color: #da7c0c;
 border-bottom: 5rpx solid #da7c0c;
}
.swiper-box{
 display: block;
 height: 100%;
 width: 100%;
 overflow: hidden;
}
.swiper-box view{
 text-align: center;
}

文章由鸿邑科技成都网站建设编辑整理，转载请注明出处！