uniapp中开发app时如何隐藏和显示uni-icons且保留其占用的空间

在 UniApp 开发中，如果你想要隐藏或显示 Uni-Icons 并同时保留它们占用的空间，可以使用 Vue 的 v-if 或 v-show 指令来控制其显示状态。以下是基本步骤：

1. 首先，在模板文件 (如 .wxml) 中引用你想动态显示或隐藏的 Uni-Icon 元素:

<view v-if="showIcon">
  <uni-icon type="your_icon_type"></uni-icon>
</view>

2. 然后，在对应的 Vue 组件的 script 标签内设置 showIcon 数据属性，并控制其值。比如你可以绑定到某个布尔变量：

export default {
  data() {
    return {
      showIcon: true, // 默认显示图标
    };
  },
};

3. 如果需要在某个条件满足时隐藏图标，只需将 showIcon 设置为 false：

this.showIcon = false;

4. 若要显示图标，再次将其设回 true:

this.showIcon = true;

这样，当你切换 `showIcon` 的值时，Uni-Icon 就会根据这个条件来显示或隐藏，同时它所占的空间会被保留在页面上。