当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序开发之遮罩功能实现教程案例

微信小程序开发之遮罩功能实现教程案例

2018-06-05 16:32 来源: 霸界科技

摘要:微信小程序开发之遮罩功能实现教程案例:所有的用法是控制显示隐藏的flag的起名的时候都加一个flag.驼峰命名法。...

期权保本理财
  微信小程序开发之遮罩功能实现教程案例:所有的用法是控制显示隐藏的flag的起名的时候都加一个flag.驼峰命名法。
 
微信小程序开发之遮罩功能实现教程案例
 
  step 1 放一个空块
 
  <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);
 
  目前不太明白,没有看到需要的地方,以后可以再添加这个,若是需要。
 
  或者使用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 中,以免影响渲染速度。所以最好不要使用这种方式。
 
  至此,完成。
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088