vue实现滚动分页

Vue 实现滚动分页的方法

滚动分页（无限滚动）是一种常见的用户体验优化方式，通过监听滚动事件动态加载数据。以下是几种实现方式：

使用 IntersectionObserver API

IntersectionObserver 是现代浏览器提供的 API，性能优于传统滚动事件监听。

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div ref="loader" class="loader">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      isLoading: false
    }
  },
  mounted() {
    this.loadItems()
    this.initObserver()
  },
  methods: {
    initObserver() {
      const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && !this.isLoading) {
          this.loadItems()
        }
      })
      observer.observe(this.$refs.loader)
    },
    async loadItems() {
      this.isLoading = true
      const newItems = await fetch(`/api/items?page=${this.page}`).then(res => res.json())
      this.items = [...this.items, ...newItems]
      this.page++
      this.isLoading = false
    }
  }
}
</script>

使用滚动事件监听

传统方法通过监听窗口滚动事件实现，需要注意节流处理。

<template>
  <div @scroll="handleScroll" style="height: 500px; overflow-y: auto;">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
  </div>
</template>

<script>
import { throttle } from 'lodash'

export default {
  data() {
    return {
      items: [],
      page: 1,
      isLoading: false
    }
  },
  mounted() {
    this.loadItems()
  },
  methods: {
    handleScroll: throttle(function(e) {
      const { scrollTop, scrollHeight, clientHeight } = e.target
      if (scrollHeight - scrollTop - clientHeight < 50 && !this.isLoading) {
        this.loadItems()
      }
    }, 200),
    async loadItems() {
      this.isLoading = true
      const newItems = await fetch(`/api/items?page=${this.page}`).then(res => res.json())
      this.items = [...this.items, ...newItems]
      this.page++
      this.isLoading = false
    }
  }
}
</script>

使用第三方库

可以使用现成的 Vue 无限滚动插件如 vue-infinite-loading：

1. 安装插件：

   

   npm install vue-infinite-loading

2. 在组件中使用：

   
   <template>
   <div>
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <infinite-loading @infinite="loadItems"></infinite-loading>
   </div>
   </template>

import InfiniteLoading from 'vue-infinite-loading'

export default { components: { InfiniteLoading }, data() { return { items: [], page: 1 } }, methods: { async loadItems($state) { try { const newItems = await fetch(/api/items?page=${this.page}).then(res => res.json()) if (newItems.length) { this.items = [...this.items, ...newItems] this.page++ $state.loaded() } else { $state.complete() } } catch (error) { $state.error() } } } }

```

性能优化建议

• 使用虚拟滚动处理大量数据（如 vue-virtual-scroller）
• 添加防抖/节流避免频繁触发
• 服务端实现高效的分页查询
• 考虑添加骨架屏提升用户体验
• 在组件销毁时移除事件监听器

以上方法可根据具体需求选择，IntersectionObserver 方案在现代浏览器中性能最佳，第三方库方案开发效率最高。