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

偷光2023-08-20 22:41

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

复制代码

data: {
  dynamicClass: ''
}

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

复制代码

// 假设你想在点击按钮时动态添加class
onTapButton: function() {
  this.setData({
    dynamicClass: 'new-class'
  });
}

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

复制代码

<view class="{{dynamicClass}}">这是一个视图</view>

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

在组件中动态添加 class

.wxml

js 复制代码

<view class="toast {{closeToast}}"> </view>

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

.js

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"，从而动态地给<view>标签添加一个名为"toast show"的class。