微信小程序 swiepr定制tab栏切换效果

直接先看效果图

<view class="flex-row">
   <view class="{{currentTab==0 ?'flex-view-item1':'flex-view-item'}}" bindtap='tap0'>首页</view>
   <view class="{{currentTab==1 ?'flex-view-item1':'flex-view-item'}}" bindtap='tap1'>通讯</view>
   <view class="{{currentTab==2 ?'flex-view-item1':'flex-view-item'}}" bindtap='tap2'>发现</view>
   <view class="{{currentTab==3 ?'flex-view-item1':'flex-view-item'}}" bindtap='tap3'>我的</view>
</view>

<swiper current="{{currentTab}}" bindchange='bindChange'>
  <swiper-item><view>1</view></swiper-item>
  <swiper-item><view>2</view></swiper-item>
  <swiper-item><view>3</view></swiper-item>
  <swiper-item><view>4</view></swiper-item>
</swiper>

.flex-row{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
/*按钮默认状态下属性*/
.flex-view-item {
  width: 20%;
  height: 50px;
  background-color: #ffa589;
  text-align: center;
}
/*按钮选中状态下属性*/
.flex-view-item1 {
  width: 20%;
  height: 50px;
  background-color: #ff5400;
  text-align: center;
}

Page({
  /*页面的初始数据*/
  data: {
    currentTab:0
  },
  tap0: function (e) {
    this.setData({
      currentTab:0
    })
  },
  tap1: function (e) {
    this.setData({
      currentTab: 1
    })
  },
  tap2: function (e) {
    this.setData({
      currentTab: 2
    })
  },
  tap3: function (e) {
    this.setData({
      currentTab: 3
    })
  },
  bindChange:function(e){
    this.setData({
      currentTab: e.detail.current
    })
  },
})