7***@qq.com
7***@qq.com
  • 发布:2019-07-09 18:04
  • 更新:2020-03-20 10:11
  • 阅读:5159

请问下uniapp subnvues 有没办法监听遮罩层点击事件

分类:uni-app

请问下uniapp subnvues 有没办法监听遮罩层点击事件

2019-07-09 18:04 负责人:无 分享
已邀请:
t***@163.com

t***@163.com

你看我的动图

  • DC1oud_用户

    你的app很漂亮


    怪了...会不会是版本的原因?..

    2019-09-03 18:30

  • DC1oud_用户

    这个subNvue所在页面是vue页面还是nvue页面呢?

    我用的HBuilder X版本是2.2.2.20190816

    2019-09-03 18:40

  • t***@163.com

    回复 DC1oud_用户: nvue啊,官方文档说了,我的版本和你的一样

    2019-09-04 10:38

  • DC1oud_用户

    回复 t***@163.com: 我上传了一个我这边没有效果的例子, 你方便在你那边运行试一下有没有效果吗?

    2019-09-04 11:12

  • 1***@qq.com

    请问你的遮罩层是在弹框下面吗?为什么我设置遮罩层后,遮罩层在弹窗上面啊?

    2019-11-15 11:01

simpigo

simpigo

遇到了同样的问题:设置了mask后,subNvue中的元素都不能点击,应该就是mask遮住了页面。
打印了一下窗口实例,发现如果是要在关闭子窗口后执行一些操作可以监听 hide 操作。

const subNVue = uni.getCurrentSubNVue();  
subNVue.addEventListener("hide", function() {  
  console.log("窗口关闭");  
  // do something  
}, false);
t***@163.com

t***@163.com

const subNVue = uni.getCurrentSubNVue();
subNVue.addEventListener("maskClick", function() {
console.log("遮罩点击");
// subNVue.setStyle({
// mask: "none"
// });
}, false);

  • 7***@qq.com (作者)

    这个配置文件里不设置"mask":"rgba(0,0,0,0.2)"没用 我是直接"position": "absolute","top": "200px",的点击事件监听

    2019-07-20 09:27

  • t***@163.com

    回复 7***@qq.com: 你可以设置mask:"rgba(0,0,0,0)",就是透明的了.

    2019-07-22 10:18

  • DC1oud_用户

    subNvue可以添加事件吗?这也试了一下, 添加maskClick事件, 没有效果呀? subnvue的说明里也没有说可以添加事件呀?是之前可以吗?

    2019-09-03 16:44

  • t***@163.com

    回复 DC1oud_用户: subNvue就是父webview里的子webview,WebviewObject对象有maskclick点击事件的.我这边是可以监测到的.

    2019-09-03 17:25

  • DC1oud_用户

    回复 t***@163.com: 我是在subNvue的页面(nvue)里的created方法里添加的事件绑定

    created: function() {

    uni.getCurrentSubNVue().addEventListener("maskClick", function(e) {

    console.log("maskClick")

    }, false)

    }

    我点击遮罩层, 没有log呀...请问是可能是我哪步出了问题?

    2019-09-03 17:46

  • t***@163.com

    回复 DC1oud_用户: 我不知道你是什么情况,我的确实可以,看我发的截图

    2019-09-03 18:13

DC1oud_用户

DC1oud_用户

回复 t***@163.com:
我写了一个简单的例子...在我这边是没有效果的, 你如果有时间可否帮忙在你那边运行试一下有没有效果

另外,请问一下, 这个还支持别的事件吗?比如:touchmove, click之类的?

  • t***@163.com

    你看看这样你能用吗?你要在page.json里设置mask,就能监听到mask的点击了

    2019-09-04 13:00

  • t***@163.com

    其他事件你看看文档里是不是支持,你自己试试

    https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewEvent

    2019-09-04 13:06

t***@163.com

t***@163.com

你看看这个,我改了一下,能不能满足你的需求

DC1oud_用户

DC1oud_用户

我的天

mask HexColor rgba(0,0,0,0.5)

我看到文档上是这样的写的, "rgba(0,0,0,0.5)"这个是默认值, 所以我以为默认就是有的

还有...这个mask(遮罩层)是指盖在subNVue窗口之上的一层遮罩吗? 我还以为是subNVue旁边的阴影(比如width:50%, subNVue旁边会有一个灰色的阴影, 点击可关闭)

那你上面的app的截图里, 那个灰色的遮罩层是页面内部自己实现的一个效果是吧?
有mask, 按钮("取消", "立即更新")是点不了的, 只有点击一次, 触发maskClick, 逻辑里隐藏mask, 再才能点击按钮, 是这个逻辑吗?

我感觉我找到了救星

  • t***@163.com

    如果subNVue不是全屏的默认会有一个遮罩,点击它就是隐藏subNvue,但是监听不到,我是做了个透明全屏的遮罩rgba(0,0,0,0),这样是能监听到遮罩点击,但是会把事件给拦截掉,传不到下层布局上,所以按钮点不了.逻辑就是你说的那样,但是有个坑,如果你隐藏了mask,它就会给subNvue一个背景色,就不能透明了,就显示不了下面的内容了

    2019-09-04 15:49

  • DC1oud_用户

    回复 t***@163.com: 刚才我试了一下, 确实这样, 而且maskClick拿不到event? 点击坐标也就拿不到了?不能根据点击位置做判断

    2019-09-04 16:18

  • t***@163.com

    回复 DC1oud_用户: 是的,我准备用nativeobj去画,这样画的view不支持滚动,如果你不需要滚动可以用view自己画

    2019-09-04 16:31

维羊

维羊 - 小小的前端开发工程师

问一下大佬 你是怎么把subNvue圆角的??

要回复问题请先登录注册