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

最新推荐文章于 2025-10-28 19:24:38 发布

原创最新推荐文章于 2025-10-28 19:24:38 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #vue.js

vue 同时被 3 个专栏收录

18 篇文章

订阅专栏

移动端

9 篇文章

订阅专栏

vant

3 篇文章

订阅专栏

本文介绍了在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="onLoad"
  >
    <van-cell v-for="item in worlOrderList " :key="item" :title="item" />
  </van-list>
</van-pull-refresh>

async getList() {
      this.loading = true
      const result = await getProductOrderList()
      this.isLoading = false
      this.loading = false
      this.refreshing = false //主要原因在这  
      const { code, data = {}, message } = result.data || {}

      if (code === '200') {
        if (this.queryList.current > 1) {
          this.worlOrderList = this.worlOrderList.concat(data.records)
        } else {
          this.worlOrderList = data.records
        }

        this.total = data.total
        if (this.total <= this.worlOrderList.length) {
          this.finished = true
        }
      } else {
        Toast.fail(message || '系统繁忙')
      }
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false
      this.worlOrderList = []
      this.queryList.current = 1
      this.getList()
    },
    // 加载更多
    onLoad() {
      this.queryList.current += 1
      this.getList()
    }