微信小程序 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;
}

有帮助到大家的记得关注噢~

 

喜欢上方小程序,需要源码的,私信关注小编留下邮箱。