微信小程序 swiper 滑动tab切换

 

话不多说，很简单 直接上代码吧

  
  
    {{item}}
  
  
    
      全部
    
    
      审核中
    
    
      未通过
    
    
      已通过
    
  

 

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

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

 

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