uni-app scroll-view 下拉刷新存在BUG

uni-app scroll-view 下拉刷新存在BUG

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

<scroll-view scroll-y refresher-enabled [@refresherrefresh](/user/refresherrefresh)="refresh" style="width: 100%; height: 500px;">
<view style="height:3000px"></view>
</scroll-view>  

refresh: function(){
console.log('下拉刷新');
}

操作步骤：

<scroll-view scroll-y refresher-enabled [@refresherrefresh](/user/refresherrefresh)="refresh" style="width: 100%; height: 500px;">
<view style="height:3000px"></view>
</scroll-view>  

refresh: function(){
console.log('下拉刷新');
}

预期结果：

<scroll-view scroll-y refresher-enabled [@refresherrefresh](/user/refresherrefresh)="refresh" style="width: 100%; height: 500px;">
<view style="height:3000px"></view>
</scroll-view>  

refresh: function(){
console.log('下拉刷新');
}

实际结果：

<scroll-view scroll-y refresher-enabled [@refresherrefresh](/user/refresherrefresh)="refresh" style="width: 100%; height: 500px;">
<view style="height:3000px"></view>
</scroll-view>  

refresh: function(){
console.log('下拉刷新');
}

bug描述：

用scroll-view做滚动区域，添加下拉刷新@refresherrefresh事件，scroll-view里面的滚动还没到顶的时候@refresherrefresh事件就执行了。app 和 h5存在这个情况，小程序没有。


更多关于uni-app scroll-view 下拉刷新存在BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html

24 回复

修复啥了，结果修复出另外问题了，滚动出现穿透了

更多关于uni-app scroll-view 下拉刷新存在BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html


更新开发工具后 [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.这个 出现了

现在 修复的不能穿透操作了。唉。

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

已上传附件，运行到h5或者app之后页面上一个滚动区域，先滚到最底部，然后往上滚还没到最上面就会触发@refresherrefresh事件

回复 Jiang731619: H5不支持，app-vue问题复现，后续优化，已加分，感谢您的反馈！

回复 DCloud_UNI_Anne: 现在好了，下拉刷新的只能触发一次啦

试试 HBuilderX alpha 3.1.22

越修复越乱，

回复 刘超群: 已看到你发的帖子，将会有人跟进

查了一下源码，7月5日提交的，有严重bug。beforeRefreshing在用户对refresherTriggered置为false的时候，不会发生变化，导致永远无法进行下一次刷新。多下拉几次，后面的操作都无法刷新了。
而且这次修复解决的问题，其实只需要原来的代码在每次处罚刷新之前，检测一下当前高度，满足条件，才进行refresh操作，完全没必要做这么大的改动，改完了之后又明显的没有做测试，害我们程序出问题。
而且原有bug可以通过外部代码解决，现在的这个代码，改外部代码完全没有作用。从普通bug变成高级bug。

3.2.0 alpha 已修复

回复 DCloud_UNI_LXH: 下载了最新的版本，已确认修复，话说你是功能代码作者本人吧。。。小伙要加油啊

回复 z***@163.com: 代码是之前的，在基础上做的修改

回复 DCloud_UNI_LXH: 兄弟，能不能加个微信？或者你找人帮我看看这个bug，有点急：https://ask.dcloud.net.cn/question/130974

H5平台修复后 如果页面有scroll-view的话 那么在scrollview的下拉不能触发原生的下拉刷新 这样导致之前但凡页面有scrollView的 下拉刷新都没用 哭…

现在在scroll-view的下拉阻止了页面的下拉，所以可能需要在scroll-view之外进行下拉

回复 DCloud_UNI_LXH: 这样会存在一个问题,就是我的页面有一部分是scrollView 的但是这个部分我也要让他下拉有页面的下拉刷新 那咋处理么？

回复 m***@outlook.com: 那你这个scrollview的下拉岂不是和页面的下拉冲突了？你想要哪个？

更新最新版，scroll-view 下拉刷新一次后，在顶部再下拉就不触发 refresherrefresh 了，但是刷新图标还出现

什么最新版？版本号多少？

回复 DCloud_UNI_LXH: HBuilderX.3.1.22.20210709.full

回复 q***@qq.com: 3.1.22是有这个问题的，在最新的alpha中修复此问题。如果你不想升级，也可以暂时使用置顶的方法处理一下

从你描述的问题来看，这确实是uni-app中scroll-view组件在下拉刷新功能上的一个已知差异。问题主要出现在App和H5平台，而小程序平台表现正常。

核心问题在于：当scroll-view内部内容未滚动到顶部时，App和H5平台就已经触发了refresherrefresh事件，这不符合用户对下拉刷新的预期行为。

技术分析：

  1. 平台差异：小程序底层使用的是原生组件，下拉刷新机制较为完善；而App和H5的实现可能存在边界判断的逻辑差异
  2. 触发时机：refresherrefresh事件的触发条件在不同平台上的容错机制不一致
  3. 滚动位置检测：App和H5可能没有准确检测scroll-view是否已滚动到顶部

临时解决方案： 可以通过手动控制refresher-enabled属性来规避这个问题：

data() {
  return {
    refresherEnabled: false
  }
},
onLoad() {
  // 监听页面滚动，在滚动到顶部时才启用下拉刷新
  this.$nextTick(() => {
    const query = uni.createSelectorQuery().in(this);
    query.select('.scroll-view').boundingClientRect(data => {
      // 添加滚动监听逻辑
    }).exec();
  });
}
回到顶部