实现的主要思路是根据每一项的index值，动态改变idx值，当index==idx值的时候，添加点击选中样式的类名。
wxml:
<scroll-view scroll-x="true"> <view class="scroll-x"> <view wx:for-items="{{scrolls}}" wx:key="name"> <view class="view {{index==idx?‘_left‘:‘left‘}}" data-index="{{index}}" bindtap="goIndex">{{item}}</view> </view> </view> </scroll-view>
接下来是css:
.scroll-x { display: flex; flex-direction: row; } .view { width: 200px; text-align: center; } .active,._left{ color: #fff; background-color: #000; border-bottom:1px solid red; }
最后是js
data: { scrolls: [‘待审批订单‘,‘已审批订单‘], idx: 0 }, goIndex (e) { this.setData({ idx:e.currentTarget.dataset.index, }) },