使用swiper和scroll-view实现联动切换

使用swiper和scroll-view实现联动切换，效果：

代码如下：
js

Page({
  data: {
    isRefresh: false,
    currentTab: 0,
    tabList: [
      {
        name: 'tab1'
      }, {
        name: 'tab2'
      }, {
        name: 'tab3'
      }, {
        name: 'tab4'
      }, {
        name: 'tab5'
      },{
        name: 'tab6'
      }
    ]
  },
  onLoad() {

  },
  handleClick(e) {
    let currentTab = e.currentTarget.dataset.index
    this.setData({
      currentTab
    })
  },
  handleSwiper(e) {
    let {current, source} = e.detail
    if (source === 'autoplay' || source === 'touch') {
      const currentTab = current
      this.setData({
        currentTab
      })
    }
  },
  handleTolower(e){
    wx.showToast({
      title: '到底啦'
    })
  },
  handleRefresher() {
    wx.showLoading({
      title: '刷新中'
    })
    setTimeout(() => {
      this.setData({
        isRefresh: false
      })
      wx.showToast({
        title: '加载完成'
      })
    }, 1500)
  }
})

wxml

<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true">
    <view class="navigate-item" id="item{{index}}" wx:for="{{tabList}}" wx:key="index" data-index="{{index}}" bindtap="handleClick">
        <view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view>
        <view class="currtline {{currentTab === index ? 'active' : ''}}"></view>
    </view>
</scroll-view>

<swiper indicator-dots="{{false}}" bindchange="handleSwiper" current="{{currentTab}}">
    <block wx:for="{{tabList}}" wx:key="index">
            <swiper-item>
                <scroll-view scroll-y refresher-enabled refresher-background="#f5f5f5" refresher-triggered="{{isRefresh}}"  bindrefresherrefresh="handleRefresher" bindscrolltolower="handleTolower">
                    <view class="swiper-item" wx:for="{{20}}">第{{index + 1}}条数据</view>
                    <view class="swiper-item">最后1条数据</view>
                </scroll-view>
            </swiper-item>
    </block>
</swiper>

wxss

.scroll-wrapper {
 white-space: nowrap;
 -webkit-overflow-scrolling: touch;
 background: #FFF;
 height: 90rpx;
 padding: 0 30rpx;
 box-sizing: border-box;
}
::-webkit-scrollbar {
 width: 0;
 height: 0;
 color: transparent;
}
.navigate-item {
 display: inline-block;
 text-align: center;
 height: 90rpx;
 line-height: 90rpx;
 margin: 0 30rpx;
}
.names {
 font-size: 30rpx;
 color: #333333;
}
.names.active {
 color: #59ac80;
 font-size: 30rpx;
}
.currtline {
 margin: -8rpx auto 0 auto;
 width: auto;
 height: 8rpx;
 border-radius: 4rpx;
}
.currtline.active {
 background: #59ac80;
 transition: all .3s;
}
swiper {
 min-height: calc(100vh - 100rpx);
}
.swiper-item {
 width: 100%;
 text-align: center;
 padding: 32rpx 0;
 overflow: scroll;
}
scroll-view {
 height: calc(100vh - 100rpx);
}