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

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

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

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

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

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

定义ShowView属性

原理:定义一个ShowView属性,

详见参考链接1:

JS

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隐藏元素的方法之“[调节透明度](https://juejin.im/post/584b645a128fe10058a0d625#heading-3)”:opacity,选用这个方法是因为可以做到**响应网页点击事件**。

WXSS

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

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

WXML

     参考链接

CSDN:微信小程序动态的显示或隐藏控件

掘金:CSS 隐藏元素的八种方法

FelixXiong wechat
产品北里,讲述产品和人性、涉及设计、技术和运营的公众号。
你们的赞赏是我更新的动力~