1、整个弹窗最外层 @touchmove.stop.prevent="moveHandle",moveHandle是一个空函数 2、弹窗里面的滚动要使用scroll-view,而不是 css 的overflow
在这个示例中,scroll-view组件设置了scroll-y="true"属性来启用垂直滚动。 5. 测试滚动功能 在真实设备上或模拟器上测试你的uni-popup组件,确保滚动条功能正常工作。注意检查滚动是否平滑,以及在不同设备和浏览器上的表现是否一致。 6. 处理滚动穿透问题 ...
在上述代码中,我们使用了 page-meta 组件来动态修改页面的 overflow 属性,通过绑定 show10 变量的值来控制页面的滚动。当 show10 为true 时,底层页面的滚动被禁止,从而解决了滚动穿透问题。 2. 禁止Popup内容区域的滚动穿透 注意:在h5平台可以通过动态修改body标签的样式,设置 overflow:hidden 即可解决滚动穿透,无循...
使用了 page-meta 组件来动态修改页面的 overflow 属性,通过绑定 show变量的值来控制页面的滚动。通过uni-popup 里的@change事件,当 show为true 时,底层页面的滑动被禁止,这样就解决了弹窗滑动穿透问题。
简介: uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题 问题背景: 使用uniapp或者uview组件时,涉及到遮罩层的出现,一般会随之出现一个问题,就是当长按出现遮罩层时,此时不松手,往下滑动屏幕,还是会触发当前页面所涉及到的页面滚动甚至下拉刷新事件. 看了下...
但由于平台自身原因,除了h5平台外 ,其他平台都不能在在组件内禁止滚动穿透,所以在微信小程序、App 平台,页面内需要用户特殊处理一下 微信小程序/App 在微信小程序/App 平台可使用 page-meta 组件动态修改页面样式 , 需要在 data 中定义一个变量,用来表示 uni-popup 的开启关闭状态,并通过这个变量修改 page-meta...
在微信小程序中使用uni-popup组件时,出现滚动穿透,并且uni-popup内部内容不会滚动问题。 解决 滚动穿透 查阅官方文档,发现滚动穿透是由于平台差异性造成的,具体解决可以参照文档禁止滚动穿透 <template> <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta> ...