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

wxml

<view class="flex-row">
   <view class="{{currentTab==0 ?'flex-view-item-active':'flex-view-item'}}" bindtap='tab0'>
    <text>关注列表</text>
   </view>
   <view class="{{currentTab==1 ?'flex-view-item-active':'flex-view-item'}}" bindtap='tab1'>
    <text space="emsp">专  题</text>
   </view>
</view>
<!-- current 当前所在滑块的 index 通过切换currentTab的值来切换swiper-item -->
<swiper current="{{currentTab}}" bindchange='bindChange'>
  <swiper-item>
    <view>Page1</view>
  </swiper-item>
  <swiper-item>
    <view>Page2</view>
  </swiper-item>
</swiper>

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