uni-app 在页面里包含scroll-view情况下，无法下拉滑动刷新

uni-app 在页面里包含scroll-view情况下，无法下拉滑动刷新

开发环境 版本号 项目创建方式
Windows 10 20H2 HBuilderX

操作步骤：

一个页面里面包含scroll-view，即使pages.json设置了下拉刷新，也无法滑动

预期结果：

滑动刷新

实际结果：

滑不动

bug描述：

在页面里包含scroll-view且有内容的情况下，无法下拉刷新，h5没有问题。小程序的情况比较特殊，在scroll-view里面没有内容时可以下滑刷新，有内容，就不能滑动内容区域，空白地方没问题。


更多关于uni-app 在页面里包含scroll-view情况下，无法下拉滑动刷新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请提供可稳定复现直接运行的完整示例（上传附件），方便我们快速排查问题哦。 【正确报bug的姿势】https://ask.dcloud.net.cn/article/38139

更多关于uni-app 在页面里包含scroll-view情况下，无法下拉滑动刷新的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的。但问题很简单啊，vue page里面，即使在pages.json设置了enablePullDownRefresh，如果包含了scroll-view，就无法向下滑动，App完全不能滑动，微信小程序，如果scroll-view里面没有内容，可以滑，有内容也不能滑。H5没有问题。

要反馈的是 APP 还是小程序？

主要App, 小程序也有类似问题，不能多选

在 uni-app 中，scroll-view 组件与页面的下拉刷新功能存在冲突，这是框架的已知限制。scroll-view 作为独立滚动容器，会捕获触摸事件，阻止页面级下拉刷新的触发。

解决方案：

  1. 避免在需要下拉刷新的页面使用 scroll-view，改用 view 配合 CSS 实现滚动。
  2. 如必须使用 scroll-view，可通过 @refresherpulling 监听自定义下拉刷新，但需自行实现刷新逻辑和样式。
  3. 对于内容区域，确保 scroll-view 高度设置正确（如 height: 100vh），避免滚动事件被错误捕获。

代码调整示例（移除 scroll-view）：

<template>
  <view class="content">
    <!-- 原 scroll-view 内容直接放置此处 -->
    <view v-for="item in list" :key="item.id">{{ item.text }}</view>
  </view>
</template>

<style scoped>
.content {
  height: 100vh;
  overflow-y: auto;
}
</style>
回到顶部