Shulou(Shulou.com)06/01 Report--

The editor of this article introduces in detail "how to achieve the mask function of WeChat Mini Programs". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to achieve the mask function of WeChat Mini Programs" can help you solve your doubts. Let's follow the editor's ideas to learn new knowledge.

WeChat Mini Programs to achieve the mask function, all the use is to control the name of the hidden flag to add a flag. Hump nomenclature.

Step 1 put an empty block step2 write empty block style. Mask {width:100%;height:100%;position:absolute;background-color:#999;z-index:9999;top:0;left:0;opacity:0.5;} where the color and transparency can be selected.

Some people do this compatibility treatment:

-moz-opacity: 0.7% opacity: 0.70% filter: alpha (opacity=70); not quite clear at the moment, don't see where you need it, you can add this later, if you need it.

Or using the color of rgba can also be solved.

Step 3 controls whether to show or hide the choice of wx:if and hidden. Wx:if is. Hidden is. Because templates in wx:if may also contain data binding, the framework has a local rendering process when the conditional values of wx:if are switched, because it ensures that conditional blocks are destroyed or re-rendered when switching. Wx:if is also lazy. If the initial rendering condition is false, the framework does nothing and starts local rendering only when the condition becomes true for the first time. By contrast, hidden is much simpler, and components are always rendered, simply controlling display and hiding. In general, wx:if has a higher switching cost and hidden has a higher initial rendering cost. Therefore, it is better to use hidden if you need to switch frequently, and wx:if if the conditions are unlikely to change at run time.

So

The step 4 binding method controls the true or falsebindtap='showFlag' of the flag and then writes the event handler

The showFlag:function () {this.setData ({maskFlag:false,oilchooseFlag:true})} event handler function controls display and concealment. It can control N variables to be hidden when the point is determined and hidden when the point is determined.

Identify oilConfirm:function () {this.setData ({maskFlag: true,oilchooseFlag: false})} other people's practices:

Control show and hide by controlling the display of the style:

Comments: it is officially stated that style accepts dynamic styles and will be parsed at run time. Please avoid writing static styles into style as far as possible, so as not to affect the rendering speed. So it's best not to use this way.

After reading this, the article "how to achieve the masking function of WeChat Mini Programs" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.