微信小程序 swiper滑動導航

微信小程序 swiper滑動導航 （高度可以自適應，我用的是可以的）

效果：

1.wxml

<!--pages/message/message.wxml-->
<view class="swiper-tab">
  <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">未使用</view>
  <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">已使用</view>
  <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">已過期</view>

</view>

<swiper style="height: {{clientHeight?clientHeight+'px':'auto'}}" class='videoSwiper'  current="{{currentTab}}"  duration="200" bindchange="swiperTab">
<!-- 未使用 -->
<swiper-item >
<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}" bindscrolltolower="scrollbot">
  
</scroll-view>
</swiper-item >


<!-- 已使用 -->
<swiper-item >
<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}" bindscrolltolower="scrollbot">



</scroll-view>
</swiper-item >
<!-- 已過期 -->
<swiper-item >
<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}" bindscrolltolower="scrollbot">


</scroll-view>
</swiper-item >
</swiper>

2.css

/* swiper */
.swiper-tab {
  display: flex;
  border: 1rpx solid #EFF2FF;
  background: white;
  /* margin-bottom: 35rpx; */
  /* margin-top: 60rpx; */
}

.swiper-tab-item {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  /* border: 1px solid #6c6fc0; */
  /* border-radius: 3px; */
  color: #504C4B;
  font-size: 32rpx;
  margin: 0 20rpx;
}

.active {
  color: #F5A623;
  width: 30rpx;
   border-bottom: 1px solid #F5A623;
   /* border-bottom-width: 30rpx; */
   /* border-bottom-style:  groove; */
}

.swiper-box {
  margin: 30rpx 0;
  box-sizing: border-box;
}

::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
/* swiper結束 */

3.js

 onLoad: function (options) {
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          clientHeight: res.windowHeight
        });
      }
    })

  },
  //滑動切換
  swiperTab: function (e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  //點擊切換模式
  clickTab: function (e) {
    var that = this;
    if (that.data.currentTab == e.currentTarget.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.currentTarget.dataset.current
      })
    }
  },