您的位置:首页 > 移动开发 > 微信开发

微信小程序点击移除添加class(点击改变背景颜色和字体颜色)

2017-07-25 14:30 716 查看
微信小程序不允许DOM操作,所以不能用addClass这种方法,我的用法如下。

点击元素后,获取元素中data-select值,赋值给catalogSelect,然后判断二者是否相等,一样则添加class(class的css可以先写好)。

源码下载:http://download.csdn.net/download/dknightl/9939872



<!--页面-->
<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
})

}
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐