微信小程式 swiper 滑動tab切換

話不多說，很簡單 直接上代碼吧

<view class='container'>
  <!-- tab導航 -->
  <view class='switchTab'>
    <view wx:for='{{arr}}' class='{{currentTab == index ? "active" : ""}}' data-current='{{index}}' bindtap='swichNav'>{{item}}</view>
  </view>
  <swiper current='{{currentTab}}' duration="300" style="height:{{winHeight}}px;" bindchange="bindChange">
    <swiper-item>
      全部
    </swiper-item>
    <swiper-item>
      稽核中
    </swiper-item>
    <swiper-item>
      未通過
    </swiper-item>
    <swiper-item>
      已認證
    </swiper-item>
  </swiper>
</view>
           

//index.js
//擷取應用執行個體
const app = getApp()

Page({
  data: {
     arr:['全部','稽核中','未通過','已認證'],
     currentTab:0,
    winHeight:''
  },
  onLoad(){
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        console.log(res)
        that.setData({
          winHeight: res.windowHeight-29 //這是減去tab導航的高度
        });
      }
    });
  },
  //第一步先完成導航tab切換樣式
  swichNav(e){
    var current = e.currentTarget.dataset.current
    this.setData({
      currentTab: current
    })
  },
  bindChange(e){
    var current = e.detail.current
    this.setData({
      currentTab: current
    })
  }
})
           

.switchTab{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.switchTab>view{
  flex: 1;
  text-align: center;
}
.active{
  color: red;
  border-bottom: 5rpx solid red;
}
swiper{
  width: 100%;

}
swiper-item{
  display: flex;
  font-size: 44rpx;
  align-items: center;
  justify-content: center;
  background: plum;
}
           

有幫助到大家的記得關注噢~

喜歡上方小程式,需要源碼的,私信關注小編留下郵箱。