码迷,mamicode.com
首页 > 微信 > 详细

小程序弹窗阻止滑动的两种方法

时间:2018-10-11 01:54:48      阅读:580      评论:0      收藏:0      [点我收藏+]

标签:回到顶部   flow   触发事件   overflow   元素   动态   返回   添加   显示   

弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动。

场景1:弹窗内无滚动内容

可以在弹窗最外层元素绑定touchmove事件,触发事件返回false即(在vue类框架中也可以加.stop阻止冒泡)。

简单写法:catchtouchmove=‘true‘

此种方式会阻止弹窗内内容的滚动。

场景二:弹窗内有滚动内容

在弹窗外层根元素动态添加一个no-scroll样式,定义no-scroll为{height: 100%; overflow: hidden;}

当需要阻止滑动的弹窗显示时添加no-scroll,弹窗关闭去掉no-scroll即可。

此种方式的缺点是当弹窗显示增加no-scrll后弹窗下面的页面会回到顶部。

 

小程序弹窗阻止滑动的两种方法

标签:回到顶部   flow   触发事件   overflow   元素   动态   返回   添加   显示   

原文地址:https://www.cnblogs.com/cangqinglang/p/9769951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!