解决小程序在高层级页面滑动时,低层级页面会跟着滑动的问题

最新推荐文章于 2025-04-30 10:08:39 发布
原创 最新推荐文章于 2025-04-30 10:08:39 发布 · 1.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #ios

本文介绍了解决在移动端应用中，当组件打开并滑动时，底层页面也跟随滚动的问题。针对安卓和iOS系统，分别采用了不同的解决方案：安卓通过设置页面高度和隐藏溢出内容；iOS则额外使用了阻止组件外触控移动的策略。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题: 打开组件并上下滑动组件内容时,页面也会跟着滑动

解决方法:由于安卓和ios情况不同,所以用了两种方法,双保险.

1.当组件打开时,给整个页面设置height:100vh, overflow:hidden, 让页面高度占满屏幕并隐藏多余内容,这样页面就不会滚动了. 安卓系统做到这一步就可以解决了.
在这里插入图片描述
2.ios系统在完成第1步时,该问题还没有解决,是因为ios会有回弹效果.
所以在组件上添加一个无内容的@touchmove.stop="doNothing"滑动事件,就可以禁止下层页面滑动.
理论上来说只用这一步就可以解决本问题,但保险起见我还是写了两个.
在这里插入图片描述
在这里插入图片描述

Hope_wkx
关注
qwen 32B 模型配置文件参数解释；48 个堆叠的解码器层是什么意思； `max_window_layers`的作用； 定义 `device_map`
ZJQ的博客
04-20 157
qwen 32B 模型配置文件参数解释 1. 模型架构相关 2. 注意力机制相关 3. 词表和特殊标记相关 4. 激活函数和归一化相关 5. 模型参数初始化相关 6. 模型结构尺寸相关 48 个堆叠的解码器层是什么意思 前馈神经网络（FFN，Feed-Forward Network） 归一化层 7. 位置编码相关 8. 滑动窗口相关
万字详解YOLOv8网络结构Backbone/neck/head以及Conv、Bottleneck、C2f、SPPF、Detect等模块
热门推荐
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
05-26 9万+
YOLOv8是由Ultralytics开发的最先进的目标检测模型，推升了速度、准确性和用户友好性的界限。YOLO这一缩写代表“你只看一次”（You Only Look Once），通过在一次网络传递中同时预测所有边界框，提升了算法的效率和实时处理能力。相比之下，其他一些目标检测技术需要经过多个阶段或过程来完成检测。YOLOv8在流行的YOLOv5架构上进行了扩展，在多个方面提供了改进。
微信页面弹出窗口，底部不随窗口滑动而滚动,子页面滚动,父页面也动bug修复!
wsxc451的专栏
07-11 6968
在弹出窗口滑动时，遮罩后面的页面也会随之滑动，以为是时间冒 泡导致的，上网百度了好久，方法倒是找到了好多种，在电脑上也可以了。但是在微信里滑 动还是会拖动后面的页面，看到很多地方说用下面的代码就好了： $('html,body').css({'overflow':'hidden'}); 电脑上可以，微信上面还是不行。最终不断实践，问题解决了，还要多加一个css： 全选复制放进笔记$('h
微信小程序-顶部或底部固定，中间内容可以滚动
ChibiMarukoChan的博客
11-05 1万+
1.顶部固定 <view class="top" style="width:100%;height:80px;border-top:1px solid red;background-color:#f0f0f0;position:fixed;top:0;"> 顶部固定 </view> 2.底部固定 <view class="bottom" style="wi.
页面弹窗滑动导致整体页面滑动的问题解决
lyz246859的博客
04-30 265
如图所示，在弹窗时开启状态时，我们可以给主页面加个样式，固定住页面的高100%，当弹窗关闭时，再取消主页面的固定样式，这样就完美解决了问题，是不是很简单呢？在开发有弹窗的页面的时候，新手开发者不注意的话，都会遇到弹窗内容超出需要滑动，但是滑动的时候连主页面也跟着滑动了，这是因为没有做主页面的固定注意。
微信小程序解决自定义弹出层滑动时，下层页面滚动问题
厦门在乎科技
06-16 3028
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 场景一：弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。 简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。 此种方式会阻止弹窗内内容的滚动。 场景二：弹窗内有滚动内容 在弹窗外层根元素动态添加一个no-scroll样式，
解决微信小程序自定义弹窗，滑动自定义弹窗底部的页面也一起跟着滑动的问题
lck8989的博客
10-15 3391
解决方案，我总结了以下几种 1、控制底部根目录scroll-view 的scroll-y属性的true/false，控制底部滚动以及不滚动 2、在自定义弹框最外层元素加上catchtouchmove=’true’ ；或者catchtouchmove="preventTouchMove" Pages({   preventTouchMove() {} }) 注意！！！，使用场景！！！ ...
关于小程序页面在苹果手机上会出现一滑动整个页面会跑的问题的解决办法
weixin_44864084的博客
05-11 5189
简单粗暴点就是：在页面对应json配置文件中加上：disabledScroll:true; 但是注意这个属性加上之后，你的页面就不能滑动了，所以他比较适用于那种不需要滑动的页面，这也是一个小的优化点吧！
小程序设置height:100vh导致页面超出屏幕可以上下滑动
me_reader的博客
05-27 2010
在手机上测试的时候页面可以上滑且出现一条白色的线条。给页面添加`position: fixed`
uniapp 小程序端使用uni-popup组件时，页面用了scroll-view滚动组件，uni-popup组件也使用了scroll-view滚动出现组件滚动导致页面也滚动的解决方案
qq_42628556的博客
04-10 3842
在 uni-popup上给一个禁止滚动 @touchmove.stop.prevent="" 和一个样式height: 100vh;
这个属性到底会不会影响那个窗口先拿到点击滑动等events?
04-04
- 拥有焦点的窗口（如当前`Activity`）可能优先处理事件，但需在层级允许范围内（例如层级低的窗口即使有焦点也无法覆盖高层级窗口的事件拦截）。 --- ### 4. 实际验证方法 - **通过`adb`调试事件流**： ```bash...
通过层次化特征组合特征融合分为低层信号级融合与高层决策级融合两个阶段。在信号级融合中，时域特征与频域特征通过串联形成混合特征向量，并利用一维卷积层进行局部特征交互。在决策级融合中，独立训练基于MFCC和频谱滚降点的双分支分类网络，通过加权投票机制整合结果。
最新发布
05-20
同样的道理下,"频谱滚降点"(Spectral Rolloff Point) 则用来衡量大部分的能量集中在哪个频率范围内——这对于音乐流派区分等问题特别有用因为不同类型歌曲往往具有显著差异化的音调结构. --- ###
【详解OSI七层协议】本文从OSI七层协议开始，简单介绍了一下相关概念和特性，之后会详细阐述每一层的功能、职责和功能模块，并分析每一层中的一些具体协议以及常用的传输协议、优缺点和未来发展方向
AI天才研究院
10-11 888
计算机通信领域里，OSI（Open Systems Interconnection）开放式系统互连参考模型，是一个计算机通信世界里标准化组织，由国际标准化组织ISO在1984年发布。这个模型将计算机通信分成7个层次，每一层都有其特殊的功能和作用。OSI的主要特点是抽象、标准化、分层。它通过将通信系统的功能划分为7层并定义每一层的协议，使得不同的厂商生产的计算机系统之间可以互通互联。各层之间的协议都是相互独立的，而层间的接口则由协议提供。
解决手机上层滑动，导致底层body滑动（touchmove的阻止）
--承诺同乐--的博客
11-09 5052
原文链接：https://www.haorooms.com/post/webapp_bodyslidebcdiv 下图是截取了项目部分图片~左边白色区域是从左侧滑出的菜单栏，右边灰色区域是遮罩层； 当左边用户中心白色区域菜单过多，或者是手机屏幕过小出现滚动条的时候，在其表层滑动时，底层部分body也会跟着滑动~   解决方法： 1、该区域没有滚动条： 最直接的办法，禁止表层滑动，如...
Vue出现弹出层时，禁止底部页面跟随滑动
benetan的专栏
07-23 2796
最近做VUE发现在图层滑动上，不能阻止下层滑动，还停留在以前的css样式控制上。 转自：https://blog.csdn.net/wh_xmy/article/details/89492622 背景：最近在写一个vue项目，当出现弹出层时，发现底部页面跟随滚动，但是产品不想要这种效果，于是找各种资料，发现很多说法，但是试了试，发现有的根本就不行，比如说有人提出用vue中提供的@touchmo...
解决微信小程序自定义弹窗，滑动导致底部也一起滑动的几种方案
gzyzwx的博客
08-30 7704
在开发小程序中，自定义弹窗上面滚动，导致底部也一起滑动如左图，接触黑色阴影，会导致底部也一起滑动 解决方案，我总结了以下几种 1、控制底部根目录scroll-view 的scroll-y属性的true/false，控制底部滚动以及不滚动 2、在自定义弹框最外层元素加上catchtouchmove=’true’ ；或者catchtouchmove="preventTouchMove" Pag...
JS 阻止浮层弹窗下滚动
qq1154479896的博客
10-23 725
1. 利用移动端的 touchmove 阻止默认行为 _preventEvent(e){ e.preventDefault(); } // 禁用 document.documentElement.addEventListener('touchmove', this._preventEvent, {passive: false}) // 解除禁用 document.documentElement.removeEventListener('touchmove', this._pre
微信小程序 解决自定义弹出层滑动时下层页面滚动问题
weixin_34380948的博客
04-22 945
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 场景一：弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。 简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。 此种...
解决iOS12及一下弹框滚动会带动body内容滑动
chi1130的博客
11-21 1471
前言 在移动项目开发中往往会写一些 H5 页面，一个项目可能只有一两个页面，引入其他 UI 组件项目显得太臃肿，也没有啥必要，毕竟那些组件都是被人写的，有的时候不能一味的去使用他人写好的代码，有时间也需要自己谢谢，锻炼自己的同时也在巩固一些基础知识～～ 问题 一个页面弹出一个框，框里的内容可以滚动，但是滚动弹框时，body 内容也在动 【前提是你的 body 超过屏幕的高度】，然而在 iOS13 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值