1. 什么是uniapp滚动穿透现象? 在uniapp开发中,滚动穿透现象通常发生在弹窗(如使用uni-popup组件)内部有滚动内容,同时背景页面也可以滚动的情况下。当用户尝试在弹窗内部滚动时,背景页面的内容也会跟着滚动,这就是滚动穿透。 2. 分析可能导致滚动穿透的原因 滚动穿透的主要原因在于事件冒泡机制。当用户在触屏设备上滑...
首先，若需禁止蒙版下的页面滚动，利用page-meta组件动态修改页面的overflow属性，通过绑定变量show10来控制滚动状态。当show10为true时，底层页面滚动被禁止，解决滚动穿透问题。其次，对于禁止Popup内容区域的滚动穿透，有两种方法。一是通过page-meta组件动态修改其overflow属性，适用于禁止Popup内容区域滚动。...
在uni-app开发中,经常会使用弹出框、遮罩层以及日期选择器等组件,但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时,继续滑动会导致底层页面的滚动,这可能会影响用户体验。为…
通过uniapp框架中的page-meta标签的page-style属性，可以巧妙解决滚动穿透问题。此方法操作简便，只需几行代码即可实现。page-meta标签的page-style属性类似于HTML的body属性，这一点至关重要。在尝试使用body{overflow:hidden;}动态修改滚动属性时，曾因不知道如何动态修改body属性而困扰，且使用document方式...
除了在模态框中处理滑动穿透外,我们还可以采取其他措施来进一步提升应用的体验,例如: body{overflow:hidden;/* 禁止背景页面滚动 */} 1. 2. 3. 结论 在iOS开发中,通过合理地使用事件处理,可以有效防止滑动穿透现象。我们在UniApp中实现的模态框解决方案,不仅简便易行,还能大幅提升用户交互体验。合理的设计能让用户...
哈喽小伙伴们~今天写uniapp开发的小程序,遇到一个问题 自己手动写了蒙版和小弹窗,小弹窗里的不支持销售的商品是可以滚动的,但是也会触发外部的滚动效果 1.png 网上找了挺多方法,都不可.于是,我尝试 在最外层的view标签 采用三元表达式,如果maskBool(蒙版)是开启的状态,使用 control-scroll 这个类名 ...
上一次遇上这个滚动穿透,我是暴力解决的,当uniapp遇上可恶的滚动穿透的时候,我是怎么暴力解决的,今天学会了一个巧妙的方式,几行代码,超级方便好用,爱了爱了… 就是利用page-meta标签的page-style属性! page-meta 的page-style属性相当于HTML的body属性,这个点很重要,之前我想...
page-meta 的page-style属性相当于HTML的body属性,这个点很重要,之前我想要通过body{overflow:hidden;}的方式动态修改overflow的属性去停止页面的滚动,但是那时不知道怎么动态修改body的属性,而且如果使用document的方式去修改body的属性,在移动端真机会报错,拿不到body,真的很头疼,直到让我发现了page-st...
uniapp 蒙版层中使用scroll-view解决滚动穿透 使用page-meta来解决这个问题 nvue没试过 在当前页面上使用 // 改良了一下 加了auto不然onReachBottom onPageScroll会不生效 <page-meta :page-style="`height:${showSignInPopup ? '100vh' : 'auto'};overflow: ${showSignInPopup ? 'hidden' : 'auto'}`...
有时候,明明遮罩层是不能滚动的,层级也比底层高,但是,当底层div高度超出屏幕的时候,这个modal弹窗,照理说,这时候触摸弹窗盒子才会有反应, 而触摸被遮住的是没有反应的,但是由于这个滚动穿透,导致无论触摸屏幕哪个地方上下滑动,底部也会跟着拖动。这个问题真的是很棘手耶。