简述
由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的”data-“自定义属性去更改标签类名.
说明
通过数据绑定在3个标签上绑定相同的变量_num
, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.num
来获取标签data-num
值, 然后在wxml中通过三元运算符的匹配便可完成class名的增改,
//wxml
<view class="list-wrapper">
<view class="list-top">
<view data-num="1" class="list-menu list-menu1 {{_num==1?'cur':''}}" bindtap="menuClick">头条</view>
<view data-num="2" class="list-menu list-menu2 {{_num==2?'cur':''}}" bindtap="menuClick">活动</view>
<view data-num="3" class="list-menu list-menu3 {{_num==3?'cur':''}}" bindtap="menuClick">公告</view>
</view>
</view>
//js
menuClick:function(e){
this.setData({
_num:e.target.dataset.num
})
},
效果
我提前在cur
class中添加了样式.
注意:
currentTarget和target的区别:
target和currentTarget的区别是:
target:触发事件的元素(冒泡到父级)。
currentTarget:事件绑定的元素(不会冒泡,点谁就是谁)。
两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了;
例如:
<ul id="ulT">
<li class="item1">fsda</li>
<li class="item2">ewre</li>
<li class="item3">qewe</li>
<li class="item4">xvc</li>
<li class="item5">134</li>
</ul>
<script type="text/javascript">
document.getElementById("ulT").onclick = function (event) {
console.log(event.target);
console.log(event.currentTarget);
}
</script>
currentTarget始终是监听事件者,而target是事件的真正发出者。
我们知道,e.target
可以用来实现事件委托(事件委托可以通过监听父级来达到监听子级的效果,减少了监听器的数量,使用内存也相对减少。),该原理是通过事件冒泡(或者事件捕获)给父元素添加事件监听,e.target指向引发触发事件的元素,如上述的例子中,e.target
指向用户点击的li
,由于事件冒泡,li
的点击事件冒泡到了ul
上,通过给ul
添加监听事件而达到了给每一个li
添加监听事件的效果,而e.currentTarget
指向的是给绑定事件监听的那个对象,即ul
,从这里可以发现,e.currentTarget===this
返回true
,而e.target===this
返回false
。e.currenttarget
和e.target
是不相等的。