使用了 page-meta 组件来动态修改页面的 overflow 属性,通过绑定 show变量的值来控制页面的滚动。通过uni-popup 里的@change事件,当 show为true 时,底层页面的滑动被禁止,这样就解决了弹窗滑动穿透问题。
原文链接:uniapp uni-popup弹窗出现禁止页面滚动 - 掘金 (juejin.cn) 在页面上添加遮罩层,弹出fixed弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动,给当前遮罩层添加catchtouchmove="true"便可。不过在电脑上调试是无效,因为这是触摸事件,需要在手机端测试,预览生成开发版,用手机微信扫描即可看到效果。 javascript...
关于解决uniapp--uni-popup或uview--u-popup内部元素设置over-flow无法滑动的解决方式 解决方式:uni-popup添加上@touchmove.stop.prevent=""即可
有个需求,需要在弹框中显示一个列表,并且可以选择,然后就选择了在uni-popup中自定义view的方式实现,用了组件uni-list , 本以为一切很顺利,结果集成好了以后,竟然不能滑动,在网页浏览器测试使用鼠标点击不能滑动,但是用鼠标滚轮可以滑动,这是什么情况?把uni-list单独拿到外面来也可以滑动,但是这俩组件一搭配,就失...
微信小程序,微信开发者工具调试无问题,但真机调试有问题(弹出层无法下拉加载),经过查找发现需要修改组件里得js。弹出层使用时出现无法滑动的问题 解决办法直接修改un-popup组件,去掉 @touchmove.stop.preven…
hqs-popup弹窗组件是基于uni-popup组件开发的,增加了手势滑动关闭弹窗功能,体验和抖音评论下滑关闭类似,欢迎使用~ 使用方式 <hqs-popup title="弹窗标题" v-model="showPopup"> <view>弹窗内容</view> </hqs-popup> 组件属性 // 弹窗显示可通过v-model控制 value: Boolean, // 弹窗打开来源方向 支持:bottom...
简介: uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题 问题背景: 使用uniapp或者uview组件时,涉及到遮罩层的出现,一般会随之出现一个问题,就是当长按出现遮罩层时,此时不松手,往下滑动屏幕,还是会触发当前页面所涉及到的页面滚动甚至下拉刷新事件. 看了下...
用户在组件内滚动内容时,当内容滚动到底部后,继续滑动可能导致底层页面也滚动,这不符合用户的期望。以下是两种解决方法。 解决方案 1. 禁止蒙版的滚动穿透 如果你想要禁止蒙版下的页面滚动,可以使用以下方法: <!-- page-meta 只能是页面内的第一个节点 --> <page-meta :page-style="`overflow:${show10 ? '...
在上面的示例中,通过设置animation属性为“slide-bottom”,可以给弹出窗口添加滑动动画效果。 四、注意事项 1. 确保页面中有足够的高度来容纳弹出窗口的内容和动画效果。 2. 避免在弹出的过程中与用户的其他交互操作产生冲突,如手势事件等。 3. 根据实际需求,合理使用uni-popup slot组件,避免过度依赖该组件而导致页面...
// 这里的作用是防止在内部有元素有滚动条时滑动导致关掉弹窗 if (viewStyle.transform === 'none') { return 4 changes: 2 additions & 2 deletions 4 src/uni_modules/half-popup/utils/utils.ts Original file line numberDiff line numberDiff line change @@ -2,6 +2,6 @@ * @description 转换...