微信小程序切換選中狀態

 實現的主要思路是根據每一項的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,
     })
  },