一、话不多说，上代码
.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"：表明是横向滚动
class="{{currentTab==index?'scroll_item':''}}"：当点击时才会变色，其中currentTab的初始值是0，通过点击事件更改值
