Vue中实现滚动加载与无限滚动

npm install vue-infinite-loading --save

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <infinite-loading @infinite="infiniteHandler"></infinite-loading>
  </div>
</template>

import InfiniteLoading from 'vue-infinite-loading'
export default {
  components: { InfiniteLoading },
  data () {
    return {
      items: [], // 数据源
      page: 1, // 当前页码
      limit: 10, // 每页数据条数
    }
  },
  methods: {
    infiniteHandler ($state) {
      // 加载下一页数据
      axios.get('/api/data', {
        params: {
          page: this.page,
          limit: this.limit
        }
      }).then(response => {
        // 将数据添加到items中
        this.items = this.items.concat(response.data)
        // 如果数据已经全部加载完毕，调用$state.complete()方法
        if (response.data.length < this.limit) {
          $state.complete()
        } else {
          // 否则调用$state.loaded()方法，表示还有更多数据可加载
          this.page++
          $state.loaded()
        }
      }).catch(error => {
        // 加载数据失败
        $state.error()
      })
    },
  },
}

export default {
  data () {
    return{
      items: [], // 数据源
      page: 1, // 当前页码
      limit: 10, // 每页数据条数
      observer: null, // Intersection Observer实例
      isIntersecting: false, // 是否与视口交叉
    }
  },
  mounted () {
    // 创建Intersection Observer实例
    this.observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 如果与视口交叉，加载下一页数据
          this.loadNextPage()
        }
      })
    })
    // 监听Intersection Observer
    this.observer.observe(this.$refs.intersection)
  },
  methods: {
    loadNextPage () {
      axios.get('/api/data', {
        params: {
          page: this.page,
          limit: this.limit
        }
      }).then(response => {
        // 将数据添加到items中
        this.items = this.items.concat(response.data)
        // 如果数据已经全部加载完毕，取消Intersection Observer的监听
        if (response.data.length < this.limit) {
          this.observer.unobserve(this.$refs.intersection)
        } else {
          // 否则增加页码
          this.page++
        }
      }).catch(error => {
        console.log(error)
      })
    },
  },
}