微信小程序掩码函数开发过程

微信小程序实现了掩码功能。所有用法都是添加一个标志。控制隐藏标志名称时的驼峰命名法。

step 1 放一个空块

step2 写空块的样式.mask{width:100%;height:100%;position:absolute;background-color:#999;z-index:9999;top:0;left:0;opacity:0.5;}

颜色可以是可选的，透明度也可以是可选的。

有些人已经做到了这种兼容性：

-moz-opacity: 0.7; opacity: 0.70; filter: alpha（opacity=70）;

我目前不太了解它。我看不到我需要什么。如果需要，我可以稍后添加。

或者使用rgba的颜色也可以解决。

step 3 控制显示还是隐藏wx:if与hidden的选择wx:if是...hidden是...

因为wx:中的模板if也可能包含数据绑定，所以当wx: if的条件值被切换时，框架有一个部分渲染过程，因为它确保条件块在切换时被破坏或重新渲染。同时wx: if也是惰性的，如果初始渲染条件为false，则框架不执行任何操作，并且当条件第一次变为true时，本地渲染开始。相比之下，隐藏更简单，总是渲染组件，并显示和隐藏简单的控件。通常，wx:如果具有更高的切换功耗并且隐藏具有更高的初始渲染成本。因此，如果需要频繁切换，使用hidden更好，如果条件不太可能在运行时更改，那么wx:如果更好。

所以

step 4 绑定方法控制 flag 的 true or false

Bindapap='showFlag'然后编写事件处理程序

showFlag: function（）{this.setData（{maskFlag: false，oilchooseFlag: true}）}

事件处理程序控制隐藏，并可以控制N个变量。确定该点时，还需要隐藏它。确定该点后，它将被隐藏

确定oilConfirm: function（）{this.setData（{maskFlag: true，oilchooseFlag: false}）}

其他做法：

通过控制样式显示:

来控制显示和隐藏

注释：官方描述样式接收动态样式，将在运行时解析，请尽量避免将静态样式写入样式，以免影响渲染速度。所以最好不要使用这种方法。

此时，完成。

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。