uni-app scroll-view自定义刷新后无法二次刷新

uni-app scroll-view自定义刷新后无法二次刷新

开发环境 版本号 项目创建方式
Windows win10企业版 CLI 
### bug描述：

scroll-view使用官方的demo，自定义刷新，只能刷新一次，无法二次刷新

### 示例代码：

```vue
<template>  
    <view>  
        <scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"  
            :refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"  
            @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"></scroll-view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                triggered: false  
            }  
        },  
        onLoad() {  
            this._freshing = false;  
            setTimeout(() => {  
                this.triggered = true;  
            }, 1000)  
        },  
        methods: {  
            onPulling(e) {  
                console.log("onpulling", e);  
            },  
            onRefresh() {  
                if (this._freshing) return;  
                this._freshing = true;  
                setTimeout(() => {  
                    this.triggered = false;  
                    this._freshing = false;  
                }, 3000)  
            },  
            onRestore() {  
                this.triggered = 'restore'; // 需要重置  
                console.log("onRestore");  
            },  
            onAbort() {  
                console.log("onAbort");  
            }  
        }  
    }  
</script>

操作步骤：

  • 刷新一次后再次刷新

预期结果：

  • 刷新一次后可再次刷新

实际结果：

  • 手动刷新一次后无法二次刷新

更多关于uni-app scroll-view自定义刷新后无法二次刷新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

更HBuilderX到最新版本，看下是否还有此问题

更多关于uni-app scroll-view自定义刷新后无法二次刷新的实战教程也可以访问 https://www.itying.com/category-93-b0.html


cli版本如何更新

回复 1***@qq.com: 查看官方文档 cli 部分

根据你提供的代码，问题出在 onRestore 方法中。

在 onRestore 回调里，你将 triggered 设置为了字符串 'restore'：

onRestore() {
    this.triggered = 'restore'; // 这里有问题
    console.log("onRestore");
}

refresher-triggered 属性应该接收布尔值（true/false），而不是字符串。当设置为字符串时，后续的刷新状态无法正确触发。

解决方案：

将 onRestore 方法修改为：

onRestore() {
    this.triggered = false; // 改为布尔值 false
    console.log("onRestore");
}

原因分析：

  1. refresher-triggered 属性控制刷新状态：

    • true：显示刷新动画，触发刷新
    • false：结束刷新，收起刷新控件

  2. 刷新流程应该是：

    • 用户下拉触发刷新 → triggered: true → 执行 onRefresh
    • 刷新完成 → triggered: false → 触发 onRestore
    • 重置状态为 false，准备下一次刷新

  3. 你的代码中设置 triggered: 'restore' 后，这个非布尔值会导致 scroll-view 内部状态混乱，无法再次触发刷新。

修改后的完整 onRestore 方法：

onRestore() {
    // 正确做法：重置为 false
    this.triggered = false;
    console.log("onRestore");
    
    // 同时确保刷新标志位也重置
    this._freshing = false;
}
回到顶部