在uni-app中,uni-popup组件本身并不直接支持滚动功能,但你可以通过一些方法来实现内容的滚动效果。以下是一些实现uni-popup滚动的方法:1. 确认uni-popup组件的布局和样式 首先,确保uni-popup组件的基本布局和样式已经设置正确。通常,uni-popup会覆盖整个屏幕,并且有一个遮罩层。
上面的反馈是没有问题的,uni-popup本身不可滚动,可以通过在slot里设置外层容器来设置设置滚动。但是由于uni-popup的最外层使用了@touchmove.stop.prevent,这将导致在头条小程序下,slot里面的scroll-view无法滚动
解决方案一: 因此,我们在需要做这种弹框的时候,我们首先需要把mask层的滚动事件禁用,也就是在这个popup组件中,我们在mask层上去写 @touchmove.stop.prevent=""这个事件,但是这样还是不能解决在我们popup层上滚动时,会带动页面上滚动事件的问题,我最终的解决方案如下: 1.将popup弹窗的高度设置成height:100vh。 2....
在uni-app开发中,经常会使用弹出框、遮罩层以及日期选择器等组件,但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时,继续滑动会导致底层页面的滚动,这可能会影响用户体验。为…
2023-07-06 uniapp的u-popup在内容超出固定高度的界面时设置overflow-y:scroll,小程序端可以显示滚动,app端(android)则无法滚动,解决方案:给要滚动的内容包裹一层scroll-view 如题。 分类:uniapp 好文要顶关注我收藏该文微信分享 叶乘风 粉丝-2关注 -3...
在scroll-view组件下方放一块无需滚动内容,如下: <template><view class="">打开弹窗<view class="content"><scroll-view scroll-y="true" style="height: 300rpx;"><view><view v-for="index in 20" :key="index">第{{index}}个Item</view></view></scroll-view><view class="confrim-btn">确定...
页面滚动是会滚动,但是并不会触发滚动事件,如果想禁用页面滚动,可以通过给popup添加@touchmove.stop.preven阻止页面滚动 <uni-popup ref="inputDialog" type="dialog" @touchmove.stop.prevent="() => {}" > <uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!
change(e) { this.show = e.show } } } 使用了 page-meta 组件来动态修改页面的 overflow 属性,通过绑定 show变量的值来控制页面的滚动。通过uni-popup 里的@change事件,当 show为true 时,底层页面的滑动被禁止,这样就解决了弹窗滑动穿透问题。
uni-popup中尽量不要使用scroll-view嵌套过多的内容,可能会影响组件的性能,导致组件无法打开或者打开卡顿 uni-popup不会覆盖原生 tabbar 和原生导航栏 uni-popup为了防止快速打开关闭的情况,组件默认设置了300毫秒延迟显示,如果需要去除,可到uni_modules下修改组件代码 ...
弹窗内容比较多,带滚动条,浏览到底部时关闭,再次打开,总是显示弹窗底部。如何做到每次打开都显示弹窗顶部内容。 思路是弹窗open的时候,给弹窗内容赋值。如popcontent=data.result. 弹窗close的时候,给内容清空,popcontent={} 但是刚点击close按钮,关闭动画还没执行完,内容就清空了。