当前位置：首页 > VUE

vue实现下拉分页思想

2026-01-07 05:43:37VUE

实现下拉分页的核心思想

下拉分页（无限滚动）的核心是通过监听滚动事件，在用户滚动到接近底部时自动加载下一页数据。Vue中可以通过结合v-for渲染列表、计算滚动位置以及管理分页状态来实现。

监听滚动事件

在Vue组件中，通过@scroll事件或Intersection Observer API监听滚动行为。传统方法是在滚动容器（或window）上绑定事件：

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;
    if (scrollTop + windowHeight >= scrollHeight - 100) {
      this.loadMore();
    }
  }
}

数据加载与分页管理

维护分页状态（如当前页码page、每页条数pageSize），在loadMore方法中调用API获取数据并合并到现有列表中：

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

使用Intersection Observer优化

现代浏览器推荐使用IntersectionObserver替代滚动事件，性能更优。在列表底部放置一个哨兵元素（如div），当其进入视口时触发加载：

mounted() {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      this.loadMore();
    }
  });
  observer.observe(this.$refs.sentinel);
}

结合第三方库

若项目允许，可直接使用现成库如vue-infinite-loading简化实现：

<template>
  <div>
    <div v-for="item in list" :key="item.id">{{ item.text }}</div>
    <infinite-loading @infinite="loadMore" />
  </div>
</template>
<script>
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);
        $state.loaded();
        this.page++;
      } else {
        $state.complete();
      }
    }
  }
}
</script>