当前位置：首页 > VUE

vue下拉加载怎么实现

2026-02-22 09:20:51VUE

Vue 下拉加载实现方法

监听滚动事件

在 Vue 组件中，通过 @scroll 事件监听容器的滚动行为。需要计算滚动位置是否接近底部。

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <!-- 内容列表 -->
    <div v-for="item in list" :key="item.id">{{ item.content }}</div>
    <!-- 加载提示 -->
    <div v-if="loading">加载中...</div>
  </div>
</template>

判断滚动到底部

通过比较 scrollTop、clientHeight 和 scrollHeight 判断是否滚动到底部。

methods: {
  handleScroll(event) {
    const container = event.target;
    const scrollBottom = container.scrollTop + container.clientHeight;
    const threshold = container.scrollHeight - 100; // 预留 100px 缓冲

    if (scrollBottom >= threshold && !this.loading && !this.finished) {
      this.loadMore();
    }
  }
}

加载更多数据

触发加载时调用 API 获取数据，并更新列表。注意避免重复请求。

data() {
  return {
    list: [],
    page: 1,
    loading: false,
    finished: false
  };
},
methods: {
  async loadMore() {
    this.loading = true;
    try {
      const newData = await fetchData(this.page); // 替换为实际 API
      if (newData.length) {
        this.list.push(...newData);
        this.page++;
      } else {
        this.finished = true; // 标记数据全部加载完成
      }
    } finally {
      this.loading = false;
    }
  }
}

使用第三方库

若需要快速实现，可使用现成库如 vue-infinite-loading：

安装库：
```
npm install vue-infinite-loading
```

在组件中使用：


<template>
<div>
 <div v-for="item in list" :key="item.id">{{ item.content }}</div>
 <InfiniteLoading @infinite="loadMore" />
</div>
</template>

import InfiniteLoading from 'vue-infinite-loading';

export default { components: { InfiniteLoading }, methods: { async loadMore($state) { const newData = await fetchData(this.page); if (newData.length) { this.list.push(...newData); this.page++; $state.loaded(); } else { $state.complete(); } } } };

```

优化性能

对于长列表，建议配合 vue-virtual-scroller 实现虚拟滚动，避免 DOM 节点过多导致卡顿。

npm install vue-virtual-scroller

示例实现：

vue下拉加载怎么实现

<template>
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="50"
    key-field="id"
    @scroll.native="handleScroll"
  >
    <template v-slot="{ item }">
      <div>{{ item.content }}</div>
    </template>
  </RecycleScroller>
</template>