問了度娘很久，感覺很多例子都用不到開發(fā)上，綜合了三個小時。有了完整的方案

第一種 后臺獲取list集合,js中判斷動態(tài)修改js

第二種 手動定義list集合,js中判斷動態(tài)修改js

流程

后臺返回了一個List保存在page中，wxml中 wx.for循環(huán)遍歷。然后動態(tài)點擊，調(diào)整class的樣式

案例效果 （圈住的部分為例子，點擊哪個語言，哪個標簽就變黃）

第一種效果圖

第二種效果圖 （這三個標簽，是固定的，不是后臺獲取的）

第一種 ----------后臺動態(tài)獲取，前臺動態(tài)修改class

代碼部分：

簡易流程：在wxml中 使用 for循環(huán)時候的 index索引。當標簽點擊的時候 使用data-index={{index}} 將index傳值，與js中定義的 _tapLatitude 變量作比較，如果相同就使用 orgecol 這個class

剛開始看有點暈，多想一下就明白了

wxml 文件的 wx.for循環(huán)

<view wx:for="{{languageList}}" wx:for-item="language" wx:for-index="index" class="viewlabel {{_tapLatitude==index?'orgecol':''}}" data-name="{{language}}" data-index="{{index}}" bindtap="getLanguage">{{language}}</view>

js中的

Page({/*** 頁面的初始數(shù)據(jù)*/data: {_tapLatitude:-1,//語種點擊 存儲變量},//排序語種獲取getLanguage : function (e) {//因為是標簽。所以再點一下就要取消if (that.data._tapLatitude == e.currentTarget.dataset.index){this.setData({_tapLatitude:-1, //值還原})}else{this.setData({_tapLatitude: e.currentTarget.dataset.index, //獲取index傳入的值。與定義全局變量作比較})}},})

第二種 ----------wxml中固定，js中動態(tài)修改class

流程思路同第一種 都用定義一個變量

wxml 文件中的代碼

<view class="viewcontentone" ><view class="contover {{_tapSort==1?'orige':''}} " bindtap="getSort" data-name="距離排序" data-id="1">{{sortItemLists[0]}}</view><view class="contover {{_tapSort==2?'orige':''}}" bindtap="getSort" data-name="星級排序" data-id="2">{{sortItemLists[1]}}</view><view class="contover {{_tapSort==3?'orige':''}}" bindtap="getSort" data-name="單量排序" data-id="3">{{sortItemLists[2]}}</view></view>

js 文件中的代碼

Page({/*** 頁面的初始數(shù)據(jù)*/data: {sortItemLists: ['距離排序', '星級排序','單量排序'],//導游排序列表_tapSort:3,//排序點擊 存儲變量 設置3 因為默認使用3排序},//修改排序的值字段getSort: function (e) {var that = this;let sortItemId = e.currentTarget.dataset.idthat.setData({"_tapSort": sortItemId})},})

因為每個項目業(yè)務不同，所有會有一些偏差。因為代碼是剪切式。如有遺漏看不懂的地方以及問題留言哈！

總結(jié)

以上是生活随笔為你收集整理的微信小程序 事件点击后如何动态增删class类名（自用，没毛病）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。