微信小程序點擊頂部導航欄切換樣式代碼實例

<view class='helpCateList'>
  <!-- 類別 -->
  <scroll-view class='scroll-view' scroll-x="true">
   <view class="item-content" wx:key="id" wx:for="{{helpCateList}}" wx:for-item="item">
    <view class="content {{currentTab == item.itemsId ? 'active' : ''}}" data-itemsId='{{item.itemsId}}' bindtap='cateChange' >{{item.itemsName}} </view>
   </view>
  </scroll-view>
 </view>

.helpDisList .content{
 position: relative;
 width: 710rpx;
 border-radius: 5rpx;

}
.active{ //當點擊的時候添加這個樣式
 /* border-bottom: 4rpx solid rgb(252, 186, 7); */
 color:rgb(252, 186, 7);
}

Page({
 data:{

  helpCateList:[ //數(shù)據(jù)從后臺請求回來賦值
   // { id: "1", desc: "康復醫(yī)療" },
   // { id: "2", desc: "教育" },
   // { id: "3", desc: "就業(yè)" },
   // { id: "4", desc: "扶貧" },
   // { id: "5", desc: "職業(yè)培訓" },
   // { id: "6", desc: "社會保障" },
   // { id: "7", desc: "文化生活" },
  ],
  currentTab: 1,
 },
 cateChange(e) {
  console.log(e)
  let that = this
  that.setData({

   currentTab: e.currentTarget.dataset.itemsid, //這個必須要

  })
 },