当前位置：首页 > VUE

vue实现上拉分页

2026-02-22 18:46:23VUE

实现上拉分页的基本思路

在Vue中实现上拉分页通常结合监听滚动事件和分页数据加载逻辑。核心步骤包括监听滚动位置、触发加载条件判断、请求分页数据、更新列表和状态。

监听滚动事件

通过window.addEventListener监听滚动事件，或在Vue组件中使用@scroll指令（适用于容器内滚动）。计算滚动位置与底部距离，判断是否需要加载下一页。

vue实现上拉分页

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const windowHeight = window.innerHeight;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    if (scrollTop + windowHeight >= scrollHeight - 100) {
      this.loadMore();
    }
  }
}

分页数据加载逻辑

定义分页参数（如page和pageSize），在触发加载条件时调用API获取数据。需避免重复请求和空数据加载。

data() {
  return {
    list: [],
    page: 1,
    pageSize: 10,
    loading: false,
    noMore: false
  };
},
methods: {
  async loadMore() {
    if (this.loading || this.noMore) return;
    this.loading = true;
    try {
      const res = await fetchData(this.page, this.pageSize);
      if (res.data.length === 0) {
        this.noMore = true;
      } else {
        this.list = [...this.list, ...res.data];
        this.page++;
      }
    } finally {
      this.loading = false;
    }
  }
}

使用第三方库优化

推荐使用vue-infinite-loading或vue-infinite-scroll简化实现。以vue-infinite-loading为例：

vue实现上拉分页

安装依赖：
```
npm install vue-infinite-loading
```

在组件中使用：


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

import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading }, methods: { async loadMore($state) { const res = await fetchData(this.page, this.pageSize); if (res.data.length) { this.list.push(...res.data); this.page++; $state.loaded(); } else { $state.complete(); } } } }; ```