• 简书网微信公众号二维码
您当前的位置: 首页 > 知识百科 > 微信小程序遮罩层联动怎么实现?

微信小程序遮罩层联动怎么实现?

时间:2023-07-01 14:05 阅读数:67 人阅读 分类:知识百科

  微信小程序遮罩层联动怎么实现?相信有很多的微信小程序开发者想知道微信小程序遮罩层联动怎么实现。各位亲们,如何你要实现微信小程序遮罩层联动的话,可以参考以下小编的内容。

  微信小程序遮罩层联动怎么实现?

  mui提供的mask遮罩点击遮罩部分时,会自动小程序调用mask.close();

  父子页面mask遮罩联动,第一反应写到mui.createMask()的回调函数中:

  (父页面)

  var mask

  mui.plusReady(){

  mask=mui.createMask(function (){

  plus.webview.currentWebview().children()[0].evalJS('mask.close');

  });

  }

  (子小程序页面)

  var mask

  mui.plusReady(){

  mask=mui.createMask(function (){

  plus.webview.currentWebview().opener().evalJS('mask.close');

  });

  }

  结果: Uncaught RangeError: Maximum call stack size exceeded. 丫的,死循环!

  长记*后:

  重写mask.close()方法:

  (父页面)

  var mask

  var oldclose;

  mui.plusReady(){

  mask = mui.createMask();

  //原mask.close方法

  oldclose = mask.close;

  //重写mask.close方法

  mask.close = function (){

  if (v != 'nopass') {//写成v == null也行

  console.log('-- in father != nopass --');

  //因为点击遮罩时只会执行"mask.close()",所以v==null,进入这里if小程序模块,调用子页面关闭方法。

  //调用子页面重写close()时,加上参数不让子页面的close()继续传递。

  plus.webview.currentWebview().children()[0].evalJS('mask.close("nopass")');

  }

  //关闭本页面遮罩

  oldclose();

  }

  }

  (子页面 与父页面基本一致)

  var mask

  var oldclose;

  mui.plusReady(){

  mask = mui.createMask();

  //原mask.close方法

  oldclose = mask.close;

  //重写mask.close方法

  mask.close = function (){

  if (v != 'nopass') {//写成v == null也行

  console.log('-- in child != nopass --');

  //因为点击遮罩时只会执行"mask.close()",所以v==null,进入这里if模块,调用父页面关闭方法。

  //调用父页面重写close()时,加上小程序参数不让父页面的close()继续传递。

  plus.webview.currentWebview().children()[0].evalJS('mask.close("nopass")');

  }

  //关闭本页面遮罩

  oldclose();

  }

  }

  微信小程序遮罩层联动怎么实现?微信小程序遮罩层联动实现的小程序代码已经为打击整理出来了,各位小程序开发者,赶快把以上的小程序代码保存起来吧,对您会有帮助哦,请多关注微小乔。

  相关推荐:

  小程序自定义遮罩层开发代码

  微信小程序遮罩层开发实例

  微信小程序清空缓存和获取缓存怎么弄?