在解决 uniapp 中uni-popup 弹窗出现时禁止底部页面滚动的问题时,我们可以按照以下步骤进行: 1. 确认问题现象 当uni-popup 弹窗出现时,底部页面仍然可以滚动,这通常不是期望的行为,因为弹窗通常会需要用户专注于其内容,而不需要或不应该允许背景页面滚动。 2. 查找 uni-popup 组件的官方文档 在uniapp 的官方文档...
// 方法1 内部和外部页面都无法滚动<view catchtouchmove="true"><uni-popupref="popup"><view>xxx</view></uni-popup></view>// 方法2 内部和外部页面都无法滚动<view@touchmove.prevent.stop><uni-popupref="popup"><view>xxx</view></uni-popup></view> typescript 复制代码 // 方法3 内部滚动外...
若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。按键修饰符:uni-app 运行在手机端,没有键盘事件,所以不支持按键修饰符。 1 <viewclass="mask"@touchmove.stop.prevent="moveHandle"></view> <uni-popup ref="popup"...
上面的修改可以使uni-popup里面进行滚动,但是主页面也可以进行滚动,需要再次优化。 参考uniapp官网中uni-popup禁止滚动穿透 在微信小程序/App平台可使用page-meta组件动态修改页面样式 , 需要在data中定义一个变量,用来表示uni-popup的开启关闭状态,并通过这个变量修改page-meta的overflow属性。 在uni-popup的@change事件...
在组件中,禁用了滚动事件。因此,我们把这个事件去掉就可以了。 打开组件代码,然后找到这段代码去掉就可以了。 但是之后就会导致另外一个问题的出现,我们假设这样一个场景: 1.在页面中,我们做了一个滚动分页的list,然后点击页面中的某个按钮,会弹出popup弹框,在弹框中我们需要滚动,在页面中我们同样需要滚动,那么就...
其实是因为弹窗和弹窗的遮罩层(阴影层)没有阻止电脑端的鼠标滚轮滚动的操作,所以就导致了还存在鼠标滚轮滚动穿透。 这是是用了UView的组件的问题,所以直接去源码里改 重要代码 @mousewheel.prevent 1. 遮罩层 u-mask: 弹窗u-popup : 直接在这加,那弹窗的所有地方都不能鼠标滚动了,包括你自己的scrollview区域。
但实际运行中出现了跳转过后页面过长时无法向下滑动/滚动的操作,屏幕内的其他操作还可以正常使用,唯独无法进行下滑的操作 百度后有人说是unipopup这个自带的组件的问题,(我的是HBuilderX3.5版本使用于 2023.2.15) 如上作者的解决方法是找到组件源码,修改overflow从hidden->visible ...
这个应该不算是一个难点,这是因为我之前没有做过,觉得很新鲜,所以分享在这里,要实现的功能呢长这个样子,以弹窗的形式出现用户可以选择转发给好友或者是保存相册后从相册转发 1.页面结构,因为是弹窗的形式所以选用了uni-popup <uni-popup ref="popup" animation mask-background-color="rgba(0,0,0,0.2)" @chan...
在上述代码中,我们使用了 page-meta 组件来动态修改页面的 overflow 属性,通过绑定 show10 变量的值来控制页面的滚动。当 show10 为true 时,底层页面的滚动被禁止,从而解决了滚动穿透问题。 2. 禁止Popup内容区域的滚动穿透 注意:在h5平台可以通过动态修改body标签的样式,设置 overflow:hidden 即可解决滚动穿透,无循...