uni-app uniappx嵌套滚动卡住

uni-app uniappx嵌套滚动卡住

操作步骤：

  • 官网hello-uniappx 选择嵌套列表 手指在上边的区域下滑就会卡住

预期结果：

  • 官网hello-uniappx 选择嵌套列表 手指在上边的区域下滑就会卡住

实际结果：

  • 官网hello-uniappx 选择嵌套列表 手指在上边的区域下滑就会卡住

bug描述：

  • 使用uniappx 嵌套滚动 外层scrollview滚动到内层带有吸顶的区域时 会卡住

| 信息类别           | 详细信息       |
|------------------|--------------|
| 产品分类           | uniapp/App   |
| PC开发环境操作系统    | Windows      |
| PC开发环境操作系统版本号 | win11        |
| HBuilderX类型        | 正式         |
| HBuilderX版本号      | 4.76         |
| 手机系统           | Android      |
| 手机系统版本号       | Android 16   |
| 手机机型           | 一加         |
| 页面类型           | vue          |
| vue版本            | vue3         |
| 打包方式           | 云端         |
| 项目创建方式        | HBuilderX    |

更多关于uni-app uniappx嵌套滚动卡住的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

你反馈的是 uniapp x 的安卓平台吗，提供视频说明操作步骤，什么是 上边的区域下滑会卡主，从哪里滑动，卡是什么表现

更多关于uni-app uniappx嵌套滚动卡住的实战教程也可以访问 https://www.itying.com/category-93-b0.html


IOS端嵌套滚动手指在nested-scroll-header区域触发滚动，页面会悬停在nested-scroll-body区域无法继续滚动

这个问题从最开始就有，一直就没解决

回复 放弃了键盘: 辛苦提供个复现工程，如果是问题会尽快修复。提供更多信息，有助于定位和解答你的问题。

目前设计如此，滚动父不会联动子，滚动子可以联动父

回复 DCloud_UNI_OttoJi: 我在ISSUES系统发了https://issues.dcloud.net.cn/pages/issues/detail?id=23616

这是一个已知的嵌套滚动冲突问题。在uni-app x中，当外层scroll-view与内层吸顶区域交互时，容易出现滚动卡顿或锁定。

问题原因：

  • 外层scroll-view和内层滚动区域（如sticky吸顶组件）的滚动事件冲突
  • 触摸事件在多个滚动容器间传递不顺畅
  • 嵌套滚动容器的边界检测机制存在缺陷

临时解决方案：

  1. 在外层scroll-view添加[@touchmove](/user/touchmove).stop阻止事件冒泡
  2. 使用scroll-into-view替代自动滚动
  3. 减少嵌套层级，改用单个scroll-view配合flex布局
  4. 在吸顶区域切换时添加scroll-with-animation平滑过渡

代码示例：

<scroll-view 
  scroll-y 
  [@touchmove](/user/touchmove).stop
  :scroll-with-animation="true">
  <!-- 内容区域 -->
</scroll-view>
回到顶部