微信小程序使用swiper和scroll-view做Tab标签页

说白了，就是利用轮播图的特性做Tab标签页

Page({
  data: {
    //顶部安全距离（状态栏高度）
    statusBarHeight: wx.getSystemInfoSync().statusBarHeight,
    navScrollLeft: 0,
    currentTab: 0,
    navData: [
      {
        text: 'A'
      },
      {
        text: 'B'
      },
      {
        text: 'C'
      },
      {
        text: 'D'
      },
    ],
  },
  onLoad: function () {},
  switchNav(event) {
    var cur = event.currentTarget.dataset.current;
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
})

<!-- miniprogram\pages\index\index.wxml -->
  <view class="navtab" style="margin-top:100px;">
    <view class="tablist">
        <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
        <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
            {{navItem.text}}
        </view>
        </block>
    </view>
    <!-- 全部 -->
    <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
      <swiper-item class="tab-content">
        <scroll-view style="height: 100%;" scroll-y="true" bindscroll="scroll" bindscrolltolower="bottom">
          A
        </scroll-view>
      </swiper-item>
      <swiper-item class="tab-content">
        <scroll-view style="height: 100%;" scroll-y="true" bindscroll="scroll" bindscrolltolower="bottom">
          B
        </scroll-view>
      </swiper-item>
      <swiper-item class="tab-content">
        <scroll-view style="height: 100%;" scroll-y="true" bindscroll="scroll" bindscrolltolower="bottom">
          C
        </scroll-view>
      </swiper-item>
      <swiper-item class="tab-content">
        <scroll-view style="height: 100%;" scroll-y="true" bindscroll="scroll" bindscrolltolower="bottom">
          D
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>

.tablist {
  height: 45px;
  width: 100%;
  box-sizing: border-box;
  line-height: 84rpx;
  background: #fff;
  font-size: 30rpx;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 20rpx;
}
.nav-item {
  color: #222;
  display: inline-block;
  text-align: center;
  width: 25%;
  font-size: 28rpx;
}
.nav-item.active{
  color: #ed413a;
  border-bottom: 4rpx solid #ed413a;
}
.tab-box{
  /* height: 74vh; */
  height: calc(100vh - 245px);
  padding-bottom: 25px;
  box-sizing: border-box;
}
.tab-content{
  overflow-y: scroll;
}

演示效果: