vant-list一直显示loading框

最新推荐文章于 2025-07-11 11:35:19 发布

浅端

最新推荐文章于 2025-07-11 11:35:19 发布

阅读量7.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue报错记录文章标签： vue javascript es6 html vue.js

本文链接：https://blog.csdn.net/qq_40686529/article/details/105790742

Vue报错记录专栏收录该内容

17 篇文章

订阅专栏

当使用vant-list组件时，发现加载完成后仍然显示‘正在加载…’的状态。问题出在封装的vant-list组件中，由于数据处理不当导致loading状态未能正确关闭。解决方案在于修正数据绑定和计算，确保在组件渲染前正确更新data中的值，从而解决loading状态持久化的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上的问题多是页面一直loading数据，而我的问题却是加载完之后还是显示“正在加载…”
vant的List组件通过finished和loading两个属性控制加载结束和加载中，所以一切问题要从这两个属性的赋值上找。

问题根源：

在项目中由于很多页面使用了List，所以我封装了一个vant-list组件。也就是这个万恶的组件害我忙活了一上午。代码太多我贴部分出来。
先概括一下代码意思，方便大家阅读：
（父组件给vant-list组件通过v-bind的方式传递值，vant-list通过pops接收，为了防止vant-list修改父组件的值，所以使用data来保存接收的值再进行使用。）

封装的vant-list组件的DOM：

    <van-list
      v-model="loading"
      :finished="finished"
      @load="loadMore"
    >
      <slot></slot>
    </van-list>

封装的vant-list组件的JS：

  props: {
    vanFinished: {
      type: Boolean,
      default: false
    },
    vanloading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {    //   也就是这里让我苦不堪言，一切的根源在这里
      loading: this.vanloading,
      finished: this.vanFinished
    };
  },

有了vant-list之后我就在父组件里调用这个组件了。

父组件

    <vant-list
      :vanloading="loading"
      :vanFinished="finished"
      @loadMoreNews="loadMore"
      ref="vantList"
    >

父组件中通过v-bing方式传递的值在vant-list中是实时更新的，但是data并没有，所以在组件打补丁渲染之前要重新计算一次。

解决方法：

在vant-list中：

beforeUpdate() {
    this.finished = this.vanFinished;
  },

在父组件中

    loadMore() {    // loadMore是上拉加载数据的处理函数 ，为了本帖篇幅，我把其它内容删了
          this.$refs.vantList.loading = false;  
          //  由于子组件在更新之前会把loading重新计算，。
          //  在vant-list中的beforeUpdate钩子中更新loading是无效的，
          //  这里采用获取子组件值直接更新的方式
    },