微信小程式 遮罩功能實現

所有的用法是控制顯示隱藏的flag的起名的時候都加一個flag.駝峰命名法。

step 1 放一個空塊

<view class='mask'></view>

step2 寫空塊的樣式

.mask{
  width:100%;
  height:100%;
  position:fixed;
  background-color:#999;
  z-index:9999;
  top:0;
  left:0;
  opacity:0.5;
}

其中顏色可以任選，透明度也可以任選。
使用固定定位，而不要使用absolute,這樣子頁面即使可以滑動，遮罩也是不會改變的。
有的人做了這樣的相容處理：

  -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，框架什麼也不做，在條件第一次變成真的時候才開始區域性渲染。
相比之下，hidden 就簡單的多，元件始終會被渲染，只是簡單的控制顯示與隱藏。
一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在執行時條件不大可能改變則 wx:if 較好。

所以
<view class='mask' hidden='{{maskFlag}}'></view>

step 4 繫結方法控制 flag 的 true or false

bindtap='showFlag'
然後再寫一下事件處理函式

showFlag:function(){
    this.setData({
      maskFlag:false,
      oilchooseFlag:true
    })
  }
事件處理函式控制顯隱，可以控制N個變數

還需要點確定的時候隱藏起來，如下圖

<view class='oil_confirm' catchtap='oilConfirm'>確定</view>

oilConfirm:function(){
    this.setData({
      maskFlag: true,
      oilchooseFlag: false
    })
  }

他人做法：

通過控制style的display來控制顯示和隱藏:
<view class="show" bindtap='hideview' style='display:{{display}}'>
點評：官方說明style 接收動態的樣式，在執行時會進行解析，請儘量避免將靜態的樣式寫進 style 中，以免影響渲染速度。所以最好不要使用這種方式。

至此，完成。