微信小程序是不能像一般浏览器开发使用js一样获取dom节点信息并修改css样式的。这里需要结合数据绑定,数据中的data中选择状态的设置一个true变量,未选中的设置一个false变量
接着在wxml代码中为class属性使用三元运算
class="{ {item.select ? 'active' : 'noactive'}}" //item.select 代表当前的是否选中状态,若为true则class=active。 //若为false则class=noactive
<view wx:for="{ {itemList}}"> <span class="{ {item.select ? 'active' : 'noactive'}}">{ {item.name}}</span> </view>
data: { itemList: [ {name: '推荐', id: 0, select: true}, {name: 'Xiaomi手机', id: 1, select: false}, {name: 'Redmi手机', id: 2, select: false}, {name: '游戏手机', id: 3, select: false}, {name: '电脑平板', id: 4, select: false}, {name: '智能穿戴', id: 5, select: false}, {name: '电视', id: 6, select: false}, {name: '大家电', id: 7, select: false}, {name: '小家电', id: 8, select: false}, {name: '智能家居', id: 9, select: false}, {name: '出行运动', id: 10, select: false}, {name: '日用百货', id: 11, select: false}, {name: '儿童用品', id: 12, select: false}, ] },
上面基本构思已经完成,最后只需要通过点击事件bindtap来控制选择状态,点击哪一个标签,该标签的select状态变为true,上一个选择状态的标签则变为false状态,实现动态增加和删除css样式。