MUI 框架之遮罩蒙版(mask)

mask(遮罩蒙版)

在popover、侧滑菜单等界面,经常会用到蒙版遮罩;比如popover弹出后,除popover控件外的其它区域都会遮罩一层蒙版,用户点击蒙版不会触发蒙版下方的逻辑,而会关闭popover同时关闭蒙版;再比如侧滑菜单界面,菜单划出后,除侧滑菜单之外的其它区域都会遮罩一层蒙版,用户点击蒙版会关闭侧滑菜单同时关闭蒙版。

在 MUI 框架中有两种方式使用 mask:
  • 方式一:

    ws=plus.webview.currentWebview();
    // 显示遮罩层
    ws.setStyle({mask:"rgba(0,0,0,0.5)"});
    // 点击关闭遮罩层
    ws.addEventListener("maskClick",function(){
      ws.setStyle({mask:"none"});
    },false);
    

注意:

  • 该蒙板在创建时注册监听事件,不要多次注册;
  • 增加状态判断,出现蒙板时将一个全局变量(boolean)改变;
  • 方式二:

    var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调;
    mask.show();//显示遮罩
    mask.close();//关闭遮罩
    

注意:
+ 关闭遮罩仅会关闭,不会销毁;
- 关闭之后可以再次调用mask.show(),打开遮罩;

两种方式在使用时都遇到了坑:

  • 方式一是事件多次注册与移除监听
  • 方式二是执行 mask.close()时会执行回调函数(传入的 callback);

方式一的解决方式如下:


MUI 框架之遮罩蒙版(mask)_第1张图片
mask.png

由方式一产生的遮罩能够覆盖子页面,能够解决父子遮罩问题。

方式二 mui.createMask(callback) 的源码如下:

MUI 框架之遮罩蒙版(mask)_第2张图片
createMask.png

分析源码可以发现 close 函数中会对传入的回调判断,如果有就会执行回调。关闭遮罩是通过 _remove 实现,因此可以直接使用 _remove关闭遮罩而不执行回调。

你可能感兴趣的:(MUI 框架之遮罩蒙版(mask))