uni-app scroll-view自定义刷新只触发一次 下拉不收回

uni-app scroll-view自定义刷新只触发一次 下拉不收回

开发环境 版本号 项目创建方式
Windows 64 HBuilderX 
产品分类：uniapp/H5

浏览器平台：Chrome
浏览器版本：91.044

### 示例代码：

```html
<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,  
                _freshing: false  
            }  
        },  
        onLoad() {  
            this._freshing = false;  
            // setTimeout(() => {  
            //  this.triggered = true; //触发onRefresh来加载自己的数据，如果不用这种方式，不要在此改变triggered的值    
            // }, 1000)  
        },  
        methods: {  
            onPulling(e) {  
                console.log("onpulling", e);  
            },  
            onRefresh() {  
                console.log(this._freshing)  
                if (this._freshing) return;  
                console.log('onRefresh')  
                this._freshing = true;  
                if (!this.triggered) //界面下拉触发，triggered可能不是true，要设为true    
                    this.triggered = true;  
                setTimeout(() => {  
                    this.triggered = false; //触发onRestore，并关闭刷新图标    
                    this._freshing = false;  
                }, 3000)  
            },  
            onRestore() {  
                console.log(this.triggered)  
                console.log(this._freshing)  
                console.log("onRestore");  
            },  
            onAbort() {  
                console.log("onAbort");  
            }  
        }  
    }  
</script>

操作步骤：

下拉刷新

预期结果：

下拉刷新多次触发后自动收回

实际结果：

下拉刷新只触发一次，且第二次下拉刷新后不收回

bug描述：

scroll-view自定义刷新只触发一次


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

3 回复

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

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


3.2.0 alpha 已修复

这是一个典型的scroll-view刷新状态管理问题。问题出现在onRefresh方法中的状态处理逻辑。

主要问题分析：

  1. 状态重置时机不当：在onRefresh中立即将triggered设为true，但3秒后又设为false，这个状态切换可能没有正确触发视图更新。

  2. 状态竞争条件：_freshing和triggered的状态管理存在竞态条件，可能导致刷新状态无法正确恢复。

解决方案：

onRefresh() {
    if (this._freshing) return;
    console.log('onRefresh')
    this._freshing = true;
    this.triggered = true; // 确保触发刷新状态
    
    // 模拟异步数据加载
    setTimeout(() => {
        this.triggered = false; // 重置刷新状态
        this._freshing = false;
    }, 1000) // 建议缩短等待时间测试
}
回到顶部