遮罩防止触摸穿透

        小程序中自定义遮罩在项目中 可能会遇见 内部dome高度超过100% 出现滚轮。遮罩弹出 依旧可以滚动遮罩后的内容,下面是截图。


遮罩防止触摸穿透_第1张图片
图片来自

我在遇见之后再网上搜了很多资料 乱七八糟的 什么方法都有 最后找到了。

其实很简单:在遮罩标签上添加catchtouchmove事件定义事件名称大家都会把 给个空函数就好了(电脑上可以滚动真机实测 就好了哟)

        wxml:

        wxss:.Mask{  position: fixed;  top: 0rpx;left: 0rpx;  width: 100%; height: 100%;  background: rgba(0, 0, 0, 0.5);}

        js: mask(){},

如果使用的是wx自带的提示框 (这里拿wx.showToast 测试)将它的mask属性改成true就好


遮罩防止触摸穿透_第2张图片
图片来自

我在“测试”上面绑定了一个点击事件在控制台打印出  "我是测试一" 。在上面绑定的 是弹出小程序自带的弹框提示。

遮罩防止触摸穿透_第3张图片
图片来自

这里执行了上方的事件 弹出了提示框,注意我标注的红色箭头! 我是一直有在点击测试的 。但是没有执行出来。

wxml: 的萨克里的那啥测试

z这个没有样式。js:

submit(){

    wx.showToast({

      title: '我是系统遮罩',

      icon: 'success',

      duration:2000,

      mask: true,

    })

  },

  test(){

    console.log("我是测试一")

  },

好了功能实现,结束,打卡下班。(看的下去的话 关注一下呗 蟹蟹)

emmmmm

你可能感兴趣的:(遮罩防止触摸穿透)