1.实现效果
2.实现原理
swiper：滑块视图容器。其中只可放置swiper-item组件，设置不同的swiper-item，通过bindchange事件，动态的改变当前选中项，swiper默认高度为150，必须设置相应高度才可。scroll-view：包裹整个页面，设置scroll-x或scroll-y，改变滚动的方向。3.实现代码
<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}"><view class="navigate-item" id="item{{index}}" wx:for="{{tabList}}" wx:key="index" data-index="{{index}}" bindtap="tabNav"><view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view><view class="currtline {{currentTab === index ? 'active' : ''}}" wx:if="{{currentTab === index}}"></view></view></scroll-view><swiper indicator-dots="{{false}}" bindchange="handleSwiper" current="{{currentTab}}"><block wx:for="{{tabList}}" wx:key="index"><swiper-item style="overflow: scroll;"><view class="tab_title">tab{{currentTab+1}}内容</view><scroll-view scroll-y refresher-enabled refresher-background="#F6F7F8" refresher-triggered="{{isRefresh}}" bindrefresherrefresh="refresherpulling" bindscrolltolower="handleTolower"><view class="swiper-item" wx:for="{{20}}" wx:key="index">第{{index + 1}}条数据~</view></scroll-view></swiper-item></block></swiper>
.scroll-wrapper {white-space: nowrap;-webkit-overflow-scrolling: touch;background: #FFF;height: 90rpx;padding: 0 32rpx;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: 28rpx;color: #3c3c3c;}.names.active {color: #db7c22;font-weight: bold;font-size: 34rpx;}.currtline {margin: -8rpx auto 0 auto;width: 100rpx;height: 8rpx;border-radius: 4rpx;}.currtline.active {background: #db7c22;transition: all .3s;}.tab_title{margin: 20rpx;border: 1px solid #db7c22;padding: 20rpx;box-sizing: border-box;}swiper {min-height: calc(100vh - 100rpx);}.swiper-item {width: 100%;padding: 32rpx ;box-sizing: border-box;}scroll-view {height: calc(100vh - 100rpx);}
// pages/another/scroll-x/index.jsPage({/*** 页面的初始数据*/data: {isRefresh: false,currentTab: 0,tabList: [{name: 'tab一'},{name: 'tab二'}, {name: 'tab三'}, {name: 'tab四'},{name: 'tab五'}, {name: 'tab六'},{name: 'tab七'},]},tabNav(e) {let currentTab = e.currentTarget.dataset.indexthis.setData({currentTab})},handleSwiper(e) {let {current,source} = e.detailif (source === 'autoplay' || source === 'touch') {const currentTab = currentthis.setData({currentTab})}},handleTolower(e){wx.showToast({title: '到底啦'})},refresherpulling() {wx.showLoading({title: '刷新中'})setTimeout(() => {this.setData({isRefresh: false})wx.showToast({title: '加载完成'})}, 1500)},onLoad: function (options) {},onShow: function () {},})
