微信小程序swiper进行滑动Tab切换

wxml

   
    关注列表
   
   
    专  题
   



  
    Page1
  
  
    Page2
  

wxss

/* pages/info/homePage/index.wxss */
.flex-row{
  height:120rpx; 
  background-color: #3a94e9;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
/*按钮默认状态下属性*/
.flex-view-item {
  width: 20%;
  color: #b9daff;
  text-align: center;
  margin: 0 20rpx;
  padding-bottom: 6rpx;
  border-bottom: 4rpx rgba(0, 0, 0,0) solid;
}
/*按钮选中状态下属性*/
.flex-view-item-active {
  width: 20%;
  color: #fff;
  text-align: center;
  margin: 0 20rpx;
  padding-bottom: 6rpx;
  border-bottom: 4rpx #baddff solid;
}

js

Page({
  /*页面的初始数据*/
  data: {
    currentTab: 0
  },
  tab0: function (e) {
    this.setData({
      currentTab: 0
    })
  },
  tab1: function (e) {
    this.setData({
      currentTab: 1
    })
  },
  bindChange: function (e) {
    this.setData({
      currentTab: e.detail.current
    })
  },
})