uni-app scroll-view 自定义下拉刷新的问题

uni-app scroll-view 自定义下拉刷新的问题

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

示例代码：

<scroll-view scroll-y="true" style="height: 400rpx;" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="onRefresh">  
    <view>  
        scroll-view  
    </view><view>  
        scroll-view  
    </view><view>  
        scroll-view  
    </view><view>  
        scroll-view  
    </view><view>  
        scroll-view  
    </view><view>  
        scroll-view  
    </view><view>  
        scroll-view  
    </view>  
</scroll-view>
```

```
---
triggered: false,
is_refreshing: false,  
---
``` 

```javascript
onRefresh(){
console.log('下拉刷新');
if(this.is_refreshing){
return;
}
this.is_refreshing = true;
if(!this.triggered){
this.triggered = true;
}
setTimeout(() => {
this.triggered = false;
this.is_refreshing = false;
}, 3000);
}
```

### 操作步骤：

按照代码实例运行起来之后，进行多次下拉刷新操作

### 预期结果：

每次进行下拉刷新都会触发 onRefresh 事件

### 实际结果：

只有第一次进行下拉刷新会触发 onRefresh 事件，之后不会触发

### bug描述：

scroll-view的下拉刷新只会触发一次

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

1 回复

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


这个问题是由于在 onRefresh 方法中，triggered 状态被立即设置为 true，但没有正确处理刷新完成后的状态重置逻辑。

关键问题在于：

  1. 当 triggered 为 true 时，scroll-view 会保持刷新状态
  2. 在刷新过程中再次下拉不会重复触发 refresherrefresh 事件
  3. 虽然设置了 3 秒后重置 triggered 为 false，但此时用户可能已经停止了交互

解决方案：

onRefresh() {
    console.log('下拉刷新');
    if (this.is_refreshing) {
        return;
    }
    this.is_refreshing = true;
    
    // 模拟异步操作
    setTimeout(() => {
        // 先完成刷新逻辑
        this.is_refreshing = false;
        // 再重置刷新状态
        this.triggered = false;
    }, 3000);
}
回到顶部