遮罩防止触摸穿透

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


图片来自简书

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

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

        wxml:<view class='Mask' style='display:black' catchtouchmove='mask'></view>

        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就好


图片来自简书

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

图片来自简书

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

wxml: <view style='height:600rpx;' bindtap='submit'>的萨克里的那啥</view><view bindtap='test' style='margin-top:40rpx;height:1000rpx;'>测试</view>

z这个没有样式。js:

submit(){

    wx.showToast({

      title: '我是系统遮罩',

      icon: 'success',

      duration:2000,

      mask: true,

    })

  },

  test(){

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

  },

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

emmmmm
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容