当前位置：首页 > VUE

vue实现滚动翻页

2026-03-28 17:13:01VUE

实现滚动翻页的基本思路

滚动翻页（无限滚动）的核心逻辑是监听滚动事件，当用户滚动到页面底部附近时触发数据加载。Vue 结合现代浏览器 API 可以高效实现这一功能。

使用 `@scroll` 事件监听

在容器元素上绑定 @scroll 事件，计算滚动位置与内容高度的关系：

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1
    };
  },
  methods: {
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollHeight - (scrollTop + clientHeight) < 50 && !this.loading) {
        this.loadMore();
      }
    },
    async loadMore() {
      this.loading = true;
      const newItems = await fetchData(this.page++);
      this.items.push(...newItems);
      this.loading = false;
    }
  },
  mounted() {
    this.loadMore();
  }
};
</script>

使用 Intersection Observer API

更高效的实现方式是使用 Intersection Observer，避免频繁触发滚动事件：

vue实现滚动翻页

<template>
  <div class="scroll-container">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div ref="loader" v-if="!finished">{{ loading ? '加载中...' : '' }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1,
      finished: false
    };
  },
  methods: {
    async loadMore() {
      if (this.finished) return;

      this.loading = true;
      const newItems = await fetchData(this.page++);
      this.items.push(...newItems);
      this.loading = false;

      if (newItems.length === 0) {
        this.finished = true;
      }
    }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !this.loading) {
        this.loadMore();
      }
    });

    observer.observe(this.$refs.loader);

    this.$once('hook:beforeDestroy', () => {
      observer.disconnect();
    });
  }
};
</script>

性能优化建议

节流处理：如果使用滚动事件，建议添加节流函数避免频繁触发
虚拟滚动：对于超长列表，考虑使用 vue-virtual-scroller 等库
取消请求：在组件销毁时取消未完成的请求
错误处理：添加网络请求失败的处理逻辑

完整示例代码

// 模拟数据请求
function fetchData(page) {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = Array.from({ length: 10 }, (_, i) => ({
        id: page * 10 + i,
        content: `项目 ${page * 10 + i}`
      }));
      resolve(data);
    }, 500);
  });
}

通过以上方法可以实现流畅的滚动翻页体验，推荐优先使用 Intersection Observer 方案，其性能更好且代码更简洁。