小程序开发之路-控件隐藏与显示

最近在开发的小程序项目，发现自己总是一上来就“自我感觉良好”：总是在开发之前有着很美观的设计需求，在实际开发中，都有一定难度，或许这就是我学习编码过程中需要静下心来的坎，而不是“搁置需求”的理由。

关于微信小程序个人项目的开发中有这样一个需求，即控件的隐藏与显示。在这里记录下自己过程中的问题，后续便于复盘与回顾。

在文章里的代码中，自己会增加相应的注释，便于回顾相应代码释义。

根据网页查找的结果，目前查找到的解决方案为以下两种：

在JS中定义ShowView属性，bitmap后增加该属性并设置显示与隐藏
条件渲染：wx.if

定义ShowView属性

原理：定义一个ShowView属性，

详见参考链接1：

data: {
    ShowView: true, //确定展示控件为true
  },

  /* 生命周期函数--监听页面加载 */

  onLoad: function (options) {
    showView:(options.showView=="true"?true:false)
  },

  onChangeShowState:function(){ //更改页面状态方法
    this.setData({ //获得当前页面的data
      showView:(!this.data.showView) //取反this，更改状态
    })
  },

WXML

此处主要为自己的一些尝试，发现无果。

<view class="input-title">是否有示例</view>

<switch name="switch" bindtap="ShowViaForm">{{showView?}}</switch>
<!--switch name="switch" bindtap="ShowViaForm">{{showView?'隐藏':'显示'}} 此处注释掉的原因为：隐藏、显示均为链接里的界面示范
</switch-->

<!-- 示例 -->
<view class="input-title">示例</view>
<checkbox-group class="via-choose-group_hide{{showView?'via-choose-group'_show:" name="示例">

css隐藏元素

此处采用CSS隐藏元素的方法之“调节透明度”：opacity，选用这个方法是因为可以做到响应网页点击事件。

WXSS


    .example-group-section{
      opacity: 0;
    }
    
    .example-group-section2{
      opacity: 100;
    }

目前遇到的坎主要是前两行，在HTML的写法上遇到了问题：如何在前端中显示需要隐藏的控件？

WXML

参考链接

CSDN：微信小程序动态的显示或隐藏控件
掘金：CSS 隐藏元素的八种方法