微信小程序中如何动态添加 class 属性

在微信小程序中，你可以使用setData方法来动态添加class。首先，在你的页面的js文件中，定义一个变量来存储需要动态添加的class，例如：

data: {

dynamicClass: ''

}

然后，在需要动态添加class的地方，使用setData方法来更新dynamicClass的值，例如：

// 假设你想在点击按钮时动态添加class

onTapButton: function() {

this.setData({

dynamicClass: 'new-class'

});

}

最后，在你的wxml文件中，使用动态绑定的方式来添加class，例如：

这是一个视图

这样，当你点击按钮时，视图的class就会动态地变为new-class。

在组件中动态添加 class

.wxml

首先，在wxml文件中，有一个标签，它有两个class属性：toast和{{closeToast}}。这里的toast是一个静态的class，而{{closeToast}}是一个动态的class，它的值会根据closeToast属性的值来动态变化。

.js

Component({

options: {

addGlobalClass: true

},

properties: {

closeToast:" "

},

methods: {

close() { // 定义取消

this.setData({closeToast:"toast show"})

}

}

})

在js文件中，这个组件使用了Component函数来定义。在options中，设置了addGlobalClass: true，这表示组件的样式将会继承全局样式。

在properties中，定义了一个属性closeToast，它的类型是字符串，初始值为空字符串。

在methods中，定义了一个方法close()，当这个方法被调用时，会通过setData方法将closeToast属性的值设置为"toast show"，这样就会触发动态class的更新。

总结起来，这段代码的作用是：当调用组件的close()方法时，会将closeToast属性的值设置为"toast show"，从而动态地给标签添加一个名为"toast show"的class。

参考文章