1.实现效果
scroll-left.gif
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.js
Page({
/**
* 页面的初始数据
*/
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.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: '到底啦'
})
},
refresherpulling() {
wx.showLoading({
title: '刷新中'
})
setTimeout(() => {
this.setData({
isRefresh: false
})
wx.showToast({
title: '加载完成'
})
}, 1500)
},
onLoad: function (options) {
},
onShow: function () {
},
})
