微信小程序开发中利用bind-冒泡事件处理子元素的样式

实现效果：红色方框中“家”，“公司”，“自定义”标签的文字和边框默认都是灰色，当点击其中某个标签时，只有当前标签、文字边框为橘红色，其余标签为默认样式，如下所示：

实现思路：利用冒泡事件触发改变对应元素的样式
关于微信冒泡事件的叙述，可以浏览官网文档，链接：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
下图是官网部分截图：

.wxml的代码片段
由于bind事件绑定不会阻止冒泡的行为，这里使用bindtap作为冒泡事件，冒泡时执行resetStyle函数；
并对相关的每个text设置data-*自定义属性值，以便知道触发的是哪个元素（利用e.target.dataset.tagid来获取，tagid是自定义属性）
利用三目运算进行样式的选择，isChecked[0]?‘selected’:'normal’中selected表示选中的样式，normal表示未选中的样式，这两个样式需要在wxss中定义好

  <view class="item tag" bindtap='resetStyle'><text>标签</text><text class="{{isChecked[0]?'selected':'normal'}}" data-tagid='0'>家</text><text class="{{isChecked[1]?'selected':'normal'}}" data-tagid='1'>公司</text><text class="{{isChecked[2]?'selected':'normal'}}" data-tagid='2'>自定义</text></view>

.js中的代码
.js的data属性设置是否选中的布尔值，false表示未选中，true表示选中，由于有三个标签，因此利用数组进行存放

data: {isChecked:[false,false,false], // 或isChecked: Array.apply(null, {length: 3}).map(item=>{return false})},

如下是父元素触发时的执行的函数，e.target.dataset.tagid是获取 家 中的自定义data属性值，利用属性值来改变isChecked数组中对应下标的值

/*利用冒泡事件设置text样式*/resetStyle:function(e){console.log(e.target); /*在控制台中打印e.target对象*/var arr = [false,false,false];var tagId = parseInt(e.target.dataset.tagid);if (!this.data.isChecked[tagId])arr[tagId] = !arr[tagId];this.setData({ isChecked: arr});},/**

这里说下控制台如何查看tagid的值
从e.target的对象结构可以看出自定义的tagid属性保存在dataset下，因此可以用e.target.dataset.tagid来访问，由于该数据类型是string，因此需要parseInt将其转为数字。