一、话不多说，上代码
.wxml文件写法
<!-- 滚动条 -->
<scroll-view scroll-x="true" scroll-with-animation="true" enable-flex="true" class="scroll-view">
<view wx:for="{{dateAndfeeList}}" wx:key="{{item.date}}" data-currentItem="{{item}}" data-index="{{index}}" class="{{currentTab==index?'scroll_item':''}}" bindtap="swichNav">
<view class="fee_item">
<text>{{item.date}}</text>
<text>合计:￥{{item.zfy}}</text>
</view>
</view>
</scroll-view>css样式
.scroll-view {
width: 100%;
display: inline-flex;
height: 80px;
}
.scroll_item {
color: rgb(43, 183, 226);
}
.fee_item {
display: flex;
flex-direction: column;
min-width: 130px;
margin-top: 8px;
margin-bottom: 8px;
text-align: center;
border-right: 1.5px solid #adaaaa;
}js写法
swichNav(e) {
var index = e.currentTarget.dataset.index,
this.setData({
currentTab: index,
})
}二、解析
scroll-x="true"：表明是横向滚动文章来源：https://www.toymoban.com/news/detail-527168.html
class="{{currentTab==index?'scroll_item':''}}"：当点击时才会变色，其中currentTab的初始值是0，通过点击事件更改值文章来源地址https://www.toymoban.com/news/detail-527168.html
到了这里，关于微信小程序--开发横向滚动条scroll-view的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
