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

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

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

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

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

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

定义ShowView属性

原理:定义一个ShowView属性,

详见参考链接1:

JS

WXML

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

css隐藏元素

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

WXSS

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

WXML

参考链接

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注