第三步:绑定滚动事件,用于穿透处理 接下来,我们需要使用 JavaScript 处理鼠标滚动,以实现滚动穿透的效果。 methods:{onScroll(e){// 获取滚动元素的高度与方向constscrollTop=e.target.scrollTop;if(scrollTop<=0){// 滚动到顶部,继续上滚动e.preventDefault();}if(scrollTop+e.target.clientHeight>=e.target.sc...
在上述代码中,我们使用了 page-meta 组件来动态修改页面的 overflow 属性,通过绑定 show10 变量的值来控制页面的滚动。当 show10 为true 时,底层页面的滚动被禁止,从而解决了滚动穿透问题。 2. 禁止Popup内容区域的滚动穿透 注意:在h5平台可以通过动态修改body标签的样式,设置 overflow:hidden 即可解决滚动穿透,无循...
在uniapp中,滚动穿透问题通常发生在有遮罩层(如弹窗、加载提示等)覆盖在页面上时,用户滚动遮罩层时,遮罩层下的页面内容也会跟随滚动。这种行为看起来像是滚动事件“穿透”了遮罩层,直接作用到了下面的DOM元素上,因此被称为滚动穿透。 2. 解决uniapp滚动穿透的常用方法 解决uniapp滚动穿透问题的方法主要有以下几种...
uniapp 蒙版层中使用scroll-view解决滚动穿透 使用page-meta来解决这个问题 nvue没试过 在当前页面上使用 // 改良了一下 加了auto不然onReachBottom onPageScroll会不生效 <page-meta :page-style="`height:${showSignInPopup ? '100vh' : 'auto'};overflow: ${showSignInPopup ? 'hidden' : 'auto'}`"...
tab列表使用scroll-view设置为x轴方向滚动、利用scroll-into-view和id跳转到对应的tab项。 内容区使用swiper是用于左右切换效果的,然后swiper中又嵌套了scroll-view是用于y轴方向滑动的。swiper的切换是根据current切换对应的轮播项的。 2.2.scrollH的高度获取(重点) ...
page-meta 的page-style属性相当于HTML的body属性,这个点很重要,之前我想要通过body{overflow:hidden;}的方式动态修改overflow的属性去停止页面的滚动,但是那时不知道怎么动态修改body的属性,而且如果使用document的方式去修改body的属性,在移动端真机会报错,拿不到body,真的很头疼,直到让我发现了page-st...
例如,可以将页面内容放在一个滚动视图中,并设置滚动视图的顶部偏移量,以确保内容不会穿透导航栏。 三、总结 页面穿透导航栏是uni-app小程序开发中常见的问题之一,但通过调整页面样式、使用自定义导航栏或优化页面布局等方法,我们可以有效地解决这一问题。在开发过程中,我们应注重细节和用户体验,确保小程序的美观和易...
这样,页面内容将从导航栏下方开始显示,实现穿透效果。 四、注意事项 1.自定义导航栏的高度和样式应与原生导航栏保持一致,以确保用户体验的一致性。 2.在处理页面滚动时,需要注意自定义导航栏的显示和隐藏逻辑,以避免遮挡页面内容。 3.对于不同屏幕尺寸和分辨率的设备,需要进行适配测试,确保自定义导航栏的显示效果...
哈喽小伙伴们~今天写uniapp开发的小程序,遇到一个问题 自己手动写了蒙版和小弹窗,小弹窗里的不支持销售的商品是可以滚动的,但是也会触发外部的滚动效果 网上找了挺多方法,都...
有时候,明明遮罩层是不能滚动的,层级也比底层高,但是,当底层div高度超出屏幕的时候,这个modal弹窗,照理说,这时候触摸弹窗盒子才会有反应, 而触摸被遮住的是没有反应的,但是由于这个滚动穿透,导致无论触摸屏幕哪个地方上下滑动,底部也会跟着拖动。这个问题真的是很棘手耶。