微信小程序遮罩功能開發(fā)流程
微信小程序?qū)崿F(xiàn)遮罩功能 ,所有的用法是控制顯示隱藏的flag的起名的時(shí)候都加一個(gè)flag.駝峰命名法。

step 1 放一個(gè)空塊
- <view class='mask'></view>
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);
目前不太明白,沒(méi)有看到需要的地方,以后可以再添加這個(gè),若是需要。
或者使用rgba的顏色也可以解決。
step 3 控制顯示還是隱藏
- wx:if與hidden的選擇
- wx:if是...
- hidden是...
因?yàn)?wx:if 之中的模板也可能包含數(shù)據(jù)綁定,所有當(dāng) wx:if 的條件值切換時(shí),框架有一個(gè)局部渲染的過(guò)程,因?yàn)樗鼤?huì)確保條件塊在切換時(shí)銷毀或重新渲染。 同時(shí) wx:if 也是惰性的,如果在初始渲染條件為 false,框架什么也不做,在條件第一次變成真的時(shí)候才開始局部渲染。 相比之下,hidden 就簡(jiǎn)單的多,組件始終會(huì)被渲染,只是簡(jiǎn)單的控制顯示與隱藏。 一般來(lái)說(shuō),wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此,如果需要頻繁切換的情景下,用 hidden 更好,如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。
所以
- <view class='mask' hidden='{{maskFlag}}'></view>
step 4 綁定方法控制 flag 的 true or false
bindtap='showFlag' 然后再寫一下事件處理函數(shù)
- showFlag:function(){
- this.setData({
- maskFlag:false,
- oilchooseFlag:true
- })
- }
事件處理函數(shù)控制顯隱,可以控制N個(gè)變量 還需要點(diǎn)確定的時(shí)候隱藏起來(lái),點(diǎn)確定的時(shí)候隱藏
- <view class='oil_confirm' catchtap='oilConfirm'>確定</view>
- oilConfirm:function(){
- this.setData({
- maskFlag: true,
- oilchooseFlag: false
- })
- }
他人做法:
通過(guò)控制style的display來(lái)控制顯示和隱藏:
- <view class="show" bindtap='hideview' style='display:{{display}}'>
點(diǎn)評(píng):官方說(shuō)明style 接收動(dòng)態(tài)的樣式,在運(yùn)行時(shí)會(huì)進(jìn)行解析,請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn) style 中,以免影響渲染速度。所以最好不要使用這種方式。
至此,完成。
第二部分:如何開通一個(gè)小商店