WeChat applet control elements display and hide

In the WeChat applet, you can hiddendisplay and hide elements by controlling their attributes or using CSS styles.

1. Control hiddenthe attributes of elements: In the WXML file, you can add hiddenattributes to the elements that need to be displayed and hidden, and set it as a variable. By changing the value of the variable, you can control the display and hiding of the element.

<view hidden="{
   
   {isHidden}}">这是要显示或隐藏的元素</view>

In the corresponding JavaScript file, you can isHiddencontrol the display and hiding of elements by changing the value of the variable.

Page({
  data: {
    isHidden: false, // 默认显示
  },
  toggleHidden() {
    this.setData({
      isHidden: !this.data.isHidden,
    });
  },
});

By calling toggleHiddenthe method, you can change the value of the variable to control the display and hiding of the element.isHidden

2. Use CSS styles: In the WXML file, you can add a custom class name to the elements that need to be displayed and hidden, and use CSS styles to control the display and hiding of elements.

<view class="hide-element">这是要显示或隐藏的元素</view>

In the corresponding WXSS file, you can define the corresponding CSS style to control the display and hiding of elements.

.hide-element {
  display: none; /* 隐藏元素 */
}

1. When the element needs to be displayed, the element can be displayed by removing or modifying the corresponding CSS class name.

Both of the above methods can choose the appropriate method to control the display and hiding of elements according to business needs and actual conditions.