微信小程序如何动态增删class类名

简述

由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的"data-"自定义属性去更改标签类名.

说明

通过数据绑定在3个标签上绑定相同的变量_num, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.num来获取标签data-num值, 然后在wxml中通过三元运算符的匹配便可完成class名的增改,

//wxml

      
         头条
         活动
         公告
      

//js
menuClick:function(e){
      this.setData({
         _num:e.target.dataset.num
      })
  },

效果

我提前在curclass中添加了样式.

这里写图片描述