微信小程序 动态class详解

发布时间：2023-05-21

一、class的基本使用

在微信小程序中，使用class属性可以动态控制页面元素的样式。我们可以在wxml文件中设置类名，再在样式文件中设置类名对应的样式。在js文件中动态改变元素的class属性，便可以动态修改元素的样式。下面是一个基本的例子：

<!--在wxml中设置类名-->
<view class="{{className}}">Hello World</view>

/*在js中动态改变元素的class属性*/
Page({
  data: {
    className: 'normal'
  },
  onTap: function() {
    this.setData({
      className: 'clicked'
    })
  }
})

/*在样式文件中设置类名对应的样式*/
.normal {
  color: black;
}
.clicked {
  color: red;
}

上面的例子中，在初始化时，样式为normal，颜色为黑色；在点击后，修改className为clicked，颜色为红色。

二、动态class名拼接

动态class名拼接是指在wxml中拼接一个class名，使之能动态控制元素的样式。例如：

<!--在wxml中将class名拼接起来-->
<view class="icon {{className}}"></view>

/*在js中动态改变元素的class属性*/
Page({
  data: {
    className: 'normal'
  },
  onTap: function() {
    this.setData({
      className: 'clicked'
    })
  }
})

/*在样式文件中设置类名对应的样式*/
.icon {
  width: 50px;
  height: 50px;
  background-color: gray;
}
.normal {
  color: black;
}
.clicked {
  color: red;
}

上面的例子中，我们在wxml中将class名拼接起来，使之能动态控制元素的样式。在js中动态改变元素的class属性为clicked，这时元素的字体颜色就变为了红色。

三、使用wx:if动态控制元素显示/隐藏

wx:if指令，用于在wxml中控制元素的显示与隐藏。它的值为true/false，根据值的不同，来显示或隐藏元素。下面是一个例子：

<!--使用wx:if动态控制元素显示/隐藏-->
<view wx:if="{{isShow}}">Hello World</view>

/*在js中动态改变isShow的值*/
Page({
  data: {
    isShow: true
  },
  onTap: function() {
    this.setData({
      isShow: false
    })
  }
})

上面的例子中，在初始化时，isShow为true，元素显示。在点击后，将isShow的值改为false，元素隐藏。

四、动态控制元素的样式

通过动态控制元素的class属性，我们可以动态控制元素的样式。在js中，我们可以使用setData方法来改变元素的class属性，从而改变元素的样式。下面是一个例子：

<!--在wxml中设置类名-->
<view class="{{className}}">Hello World</view>

/*在js中动态改变元素的class属性*/
Page({
  data: {
    className: 'normal'
  },
  onTap: function() {
    this.setData({
      className: 'clicked'
    })
  }
})

/*在样式文件中设置类名对应的样式*/
.normal {
  color: black;
}
.clicked {
  color: red;
  font-size: 24px;
}

在上面的例子中，我们在样式文件中对应两个类名的样式，可以通过动态改变元素的class属性来控制元素的字体颜色、字体大小等属性。

五、总结

通过以上的阐述，我们可以利用微信小程序的动态class来动态控制元素的样式、显示与隐藏等属性，为小程序开发带来更大的灵活性。

推荐文章