微信小程式點選移除新增class(點選改變背景顏色和字型顏色)
阿新 • • 發佈:2019-02-12
微信小程式不允許DOM操作,所以不能用addClass這種方法,我的用法如下。
點選元素後,獲取元素中data-select值,賦值給catalogSelect,然後判斷二者是否相等,一樣則新增class(class的css可以先寫好)。
<!--頁面-->
<view class="info_choose ">
<view class="catalog_name">花色</view>
<view class="catalog_items display-flex-row" >
<block wx:for="{{catalogs}}">
<text data-select="{{item.select}}" class="{{item.select == catalogSelect ? 'active':''}} catalog_item" bindtap="chooseCatalog">{{item.catalogName}}</text>
</block>
</view>
</view>
//js程式碼
Page({
data: {
catalogs:[
{ "catalogName": "卡其卡其",
"select":1
},
{
"catalogName": "其卡其卡卡其卡其",
"select": 2
},
{
"catalogName": "鯉魚鯉魚",
"select": 3
},
{
"catalogName" : "神蹟神蹟卡其卡其",
"select": 4
},
],
catalogSelect:0,//判斷是否選中
},
chooseCatalog:function(data){
var that=this;
that.setData({//把選中值放入判斷值
catalogSelect : data.currentTarget.dataset.select
})
}
})