van-pull-refresh下拉刷新后顶部出现空白

解决Vue中van-pull-refresh下拉刷新后顶部空白问题

最新推荐文章于 2025-10-09 14:02:27 发布

原创

最新推荐文章于 2025-10-09 14:02:27 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文介绍了在Vue项目中使用van-pull-refresh组件时遇到下拉刷新后顶部出现空白的问题及其原因。问题关键在于未在获取数据后将refreshing属性设置为false。解决方案是确保在数据请求完成后，将refreshing设为false，以关闭下拉刷新状态。同时，提供了onRefresh、onLoad方法的示例代码来说明如何正确处理数据加载和刷新操作。

问题描述

van-pull-refresh下拉刷新后顶部出现空白
在这里插入图片描述

原因分析：

由于下拉刷新后未将refreshing设置为false

解决方案：

提示：这里填写该问题的具体解决方案：
拿到数据之后需要将refreshing 设置为false

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load