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

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

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

流程

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

案例效果 （圈住的部分為例子，點(diǎn)擊哪個(gè)語言，哪個(gè)標(biāo)簽就變黃）

第一種效果圖

第二種效果圖 （這三個(gè)標(biāo)簽，是固定的，不是后臺(tái)獲取的）

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

代碼部分：

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

剛開始看有點(diǎn)暈，多想一下就明白了

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,//語種點(diǎn)擊 存儲(chǔ)變量},//排序語種獲取getLanguage : function (e) {//因?yàn)槭菢?biāo)簽。所以再點(diǎn)一下就要取消if (that.data._tapLatitude == e.currentTarget.dataset.index){this.setData({_tapLatitude:-1, //值還原})}else{this.setData({_tapLatitude: e.currentTarget.dataset.index, //獲取index傳入的值。與定義全局變量作比較})}},})

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

流程思路同第一種 都用定義一個(gè)變量

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: ['距離排序', '星級排序','單量排序'],//導(dǎo)游排序列表_tapSort:3,//排序點(diǎn)擊 存儲(chǔ)變量 設(shè)置3 因?yàn)槟J(rèn)使用3排序},//修改排序的值字段getSort: function (e) {var that = this;let sortItemId = e.currentTarget.dataset.idthat.setData({"_tapSort": sortItemId})},})

因?yàn)槊總€(gè)項(xiàng)目業(yè)務(wù)不同，所有會(huì)有一些偏差。因?yàn)榇a是剪切式。如有遺漏看不懂的地方以及問題留言哈！

總結(jié)

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

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