m***@qq.com
m***@qq.com
  • 发布:2019-01-13 15:56
  • 更新:2021-11-22 20:01
  • 阅读:23952

uni-app div蒙版,如何禁止蒙版下的页面滚动?

分类:uni-app

如题

2019-01-13 15:56 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_CHB

DCloud_UNI_CHB

方案:给蒙板view增加.stop.prevent事件修饰符,如下:

<view class="mask" @touchmove.stop.prevent="moveHandle"></view>

moveHandle 可以处理蒙版的touchmove实现,或者空实现亦可。

5***@qq.com

5***@qq.com - 慵懒の土豆

蒙版最外层加上 方法

@touchmove.stop.prevent="moveHandle"

moveHandle() {},

如果蒙版内有scroll-view 滑动效果会受到影响

给scroll-view加上 scroll-behavior: smooth; 即可

  • 1***@qq.com

    这个可以


    2020-11-18 12:26

  • juwin49

    uni-app文档上是没有scroll-behavior: smooth; 的,需要使用scroll-y='true'


    2020-11-27 11:30

  • y***@sina.com

    并没有效果呢


    2021-07-24 11:27

7***@qq.com

7***@qq.com

这个方法仅针对弹出层没有滚动的情况有效,一旦弹出层中包含滚动视图,也无法阻止底层的页面滚动,这个问题好老火

  • 7***@qq.com

    回复 sei摸挑: 不行的,就是给弹出层view加@touchmove.stop.preven="方法",这个方法只对不含有滚动视图的弹出层绝对有效,只要有滚动视图在弹出层内部,就不行了,而且都实验过了,真机,模拟器都不行,我这边是安卓app,我现在临时解决的办法就是H5的惯用方法,弹出层出现时记录页面滚动值,然后用css把页面给fixed,然后利用滚动值做一个top偏移来保持弹出时页面位置正确,当弹出层取消时,恢复所有状态,,有些麻烦,但目前也只能这么做了


    2020-01-06 11:40

  • 7***@qq.com

    回复 sei摸挑: 其实问题不是在touch move状态,因为滑动弹出层内部的滚动视图时,在滑动期间,页面是不会跟着动的,而是在当滚动视图已经到底部或者顶部时(也就是明明到底了,你还在往底的滑动的话),会自然的拖动底层的页面滚动


    2020-01-06 11:46

  • 7***@qq.com

    回复 sei摸挑: 对的,我发现我一开始就没有表述清楚,仅针对弹出层内部的滚动视图已经到底了或者到顶了,你继续强行滑动(这种场景很常见,因为你不知道滚动视图有多长,难免发生到底了,还用手滑那么一下),这个时候就会导致页面底部滚动了,所以手指在正常滑动弹出层内部的滚动视图时没有问题的。


    2020-01-06 12:09

  • a***@qq.com

    这个问题你解决没有我也遇到了 没到底部stop 是可以阻止冒泡 可是到了底部或者顶部 继续拖scroll-view 就会直接操作page 烦得很


    2020-01-19 22:26

  • c***@qq.com

    大佬你的解决方案可以贴出来看看吗? 我也遇到了,我的弹出层有滚动。谢谢大佬


    2020-02-03 14:42

m***@qq.com

m***@qq.com (作者) - IT

已解决,原来只需要给VIEW组件加一个catchtouchmove="false"就可以了

m***@qq.com

m***@qq.com (作者) - IT

但是为什么文档中没有这个呢,是不是还有更多的属性没有写在文档中?

choin

choin

我也在找这个,帮大忙了谢谢

m***@qq.com

m***@qq.com (作者) - IT

还是官方这个方法靠谱,不然控制台报一大串事件出来

sei摸挑

sei摸挑

我加catchtouchmove="false",怎么不管用,另外如果按照官方人员的回答那么做,当前那个元素也不能滚动了啊

  • choin

    https://ask.dcloud.net.cn/question/62210 试试,应该是bug 没处理类型


    2019-03-18 18:07

  • 未尛2333

    回复 sei摸挑:请问下你是怎么解决的~


    2019-04-09 15:33

  • 未尛2333

    回复 sei摸挑:貌似行不通了


    2019-04-09 15:58

lxjnoone

lxjnoone

是给蒙版层 加catchtouchmove="false" 吗 楼主

6***@qq.com

6***@qq.com

请问最终这个问题解决了么

1***@qq.com

1***@qq.com

我只是想问一句,这种问题难道没有官方解决办法吗?一年多了,最终的解决方案是?

  • choin

    最佳回复不是给方案了么


    2020-07-23 11:58

  • 开心_哈哈

    回复 choin:不起作用


    2020-08-20 17:06

1***@qq.com

1***@qq.com

有个办法笨是笨了一点

设置一个样式

.overflow{
height: 100vh;
overflow: hidden;
}

给最外边的盒子动态添加,蒙版出来了加上overflow样式,关闭了样式为空

好使,就是麻烦 ☺

  • 4***@qq.com

    这样页面会自动到顶部


    2021-11-18 17:09

Scriptkiddie

Scriptkiddie

给外面的盒子加一个:class="isUp==true? 'productDetail prevent' : 'productDetail'"
prevent 添加css属性:fixed top:0rpx
当遮罩出现时isUp 变为true
当遮罩关闭时isUp 变为false
这样就可以做到后面的不滑动 遮罩层正常滑动

不舍昼夜

不舍昼夜

我的方案是弹出层组件打开时记录当前父页面的滚动位置,弹出关闭后再用pageScrollTo滚过去。只适用于不透明的组件。

Vue.mixin({  
    onPageScroll(e) {  
        getApp().globalData.scrollTop = e.scrollTop;  
    }  
 });
1***@qq.com

1***@qq.com

在官网搜索。 弹出层滑动 popup-scroll popup
https://ext.dcloud.net.cn/plugin?id=3323
这个可以彻底解决 安卓端(主要是安卓端 弹出层包含 seroll-view滚动 滚动到底部时,会触发页面滚动的问题 ,ios端没有这个问题) 如果弹出层不包含 seroll-view滚动 直接在弹出层组件用 @touchmove.stop.prevent ="moveHandle"就能解决滚动穿透了。大家如果认为有用请顶一下让更多小伙伴看见。

该问题目前已经被锁定, 无法添加新回复