如何使用scroll-view制作左右滚动导航条效果
最新：2020/06/13。修改为scroll-view与swiper联动效果,新增下拉刷新以及上拉加载效果。。具体效果查看代码片段，以下文章内容和就不改了
刚刚在社区里看到 有老哥在问如何做滚动的导航栏。这里简单给他写了个代码片段，需要的大哥拿去随便改改，先看效果图：
[图片]
代码如下：
wxml
[代码]<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="{{taskList}}" 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>
[代码]
wxss
[代码].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 16rpx;
}
.names {
font-size: 28rpx;
color: #3c3c3c;
}
.names.active {
color: #00cc88;
font-weight: bold;
font-size: 34rpx;
}
.currtline {
margin: -8rpx auto 0 auto;
width: 100rpx;
height: 8rpx;
border-radius: 4rpx;
}
.currtline.active {
background: #47CD88;
transition: all .3s;
}
[代码]
JS
[代码]const app = getApp()
Page({
data: {
currentTab: 0,
taskList: [{
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, {
name: '有趣好玩'
}, ]
},
onLoad() {
},
handleClick(e) {
let currentTab = e.currentTarget.dataset.index
this.setData({
currentTab
})
},
})
[代码]
最后奉上代码片段：
https://developers.weixin.qq.com/s/nkyp64mN7fim
