uni-app scroll-view的自定义下拉刷新在最新的3.1.22版本上只能触发一次

uni-app scroll-view的自定义下拉刷新在最新的3.1.22版本上只能触发一次

开发环境 版本号 项目创建方式
Windows win10专业版 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10专业版

HBuilderX类型：正式

HBuilderX版本号：3.1.22

手机系统：Android

手机系统版本号：Android 7.0

手机厂商：模拟器

手机机型：夜神模拟器，google急速浏览器网页h5版

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<scroll-view  
    scroll-y="true"  
    @scrolltolower="onloadMore"  
    @scrolltoupper="onRefresh"  
    refresher-enabled="true"  
    :refresher-triggered="freshing"  
    :refresher-threshold="100"  
    refresher-background="transparent"  
    [@refresherrefresh](/user/refresherrefresh)="onRefresh"  
>  
<view v-for="(item, index) in mList" :key="index" >  

</view>  
</scroll-view>  

//对应data数据  
data() {  
        return {  
            freshing: false,  
        };  
    },  

对应监听方法  
        //监听上拉加载  
        onloadMore() {  
            this.listExploration();  
        },  
        onRefresh() {  
            if (this.freshing) return;  
            this.freshing = true;  
             setTimeout(() => {  

                    this.freshing = false;  
                }, 3000)  
        }  

style  
<style scoped lang="scss">  
scroll-view {  
    overflow-y: scroll;  
    // background-color: transparent;  
    height: calc(100vh - 264rpx - 120rpx);  
    // background-color: #ffffff;  
}  
</style>

操作步骤：

下拉一次等待一次刷新完成，然后在下拉刷新，出现等待圆圈了，但是刷新方法没有触发

预期结果：

多次刷新应能多次触发刷新方法

实际结果：

多次刷新只有第一次触发，后续均不触发刷新

bug描述：

scroll-view的自定义下拉刷新在最新的3.1.22版本上只能触发一次，动态控制了refresher-triggered的值的，相同的代码在3.1.18上面是可以多次触发的，但是就在最新的3.1.22上面就只触发一次，第二次直接@refresherrefresh指向的方法都不调用了


更多关于uni-app scroll-view的自定义下拉刷新在最新的3.1.22版本上只能触发一次的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

临时解决方案：https://ask.dcloud.net.cn/question/126610?item_id=169027

更多关于uni-app scroll-view的自定义下拉刷新在最新的3.1.22版本上只能触发一次的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是呀，我也遇到这个问题了，有什么解决方案吗

我是直接回退到上一版本了，直接没用3.2.22版

已知问题，预计下版带上

老哥，还是没有修复呢，现在

回复 maozai: 临时解决方案：https://ask.dcloud.net.cn/question/126610?item_id=169027

3.2.0 alpha 已修复

你好 大佬，我现在的版本是3.2.3版本 跟以上代码一样 小程序端 直接下拉不了。是什么情况？ 小程序的版本是1.05.2108130

回复 小猴子zz: 其他端呢？

回复 DCloud_UNI_LXH: 其他端没有测试，目前只是小程序端 不好使。我又尝试了一下 根据官方的demo测试了一下 ，只能触发一次下拉刷新后，就失效了。 再也没有办法触发下拉刷新了。

回复 DCloud_UNI_LXH: 运行到内置的浏览器 目前是可以的 功能都可以正常使用，可以多次刷新。

回复 小猴子zz: 如果H5没问题的话，那可能是小程序的问题，可以反馈至小程序社区

这是一个在uni-app 3.1.22版本中已知的scroll-view下拉刷新bug。从你的代码分析，问题确实出现在版本兼容性上。

核心问题在于：当refresher-triggered从true变为false后，scroll-view组件没有正确重置内部的下拉刷新状态，导致后续下拉操作无法再次触发@refresherrefresh事件。

临时解决方案：

  1. 添加延迟重置（推荐）：
onRefresh() {
    if (this.freshing) return;
    this.freshing = true;
    setTimeout(() => {
        this.freshing = false;
        // 添加微任务延迟确保状态更新
        setTimeout(() => {
            this.$forceUpdate();
        }, 50);
    }, 3000);
}
  1. 使用key强制重渲染：
<scroll-view  
    :key="refreshKey"
    <!-- 其他属性 -->
>

data() {
    return {
        freshing: false,
        refreshKey: 0
    };
},
onRefresh() {
    if (this.freshing) return;
    this.freshing = true;
    setTimeout(() => {
        this.freshing = false;
        this.refreshKey++; // 强制重新创建组件
    }, 3000);
}
回到顶部