VUE3上拉加载下一页功能快速get！

2023-10-23 17:59:23

前言

随着移动互联网的快速发展，手机端网页已经成为人们获取信息的主要方式之一。为了给用户带来更好的体验，手机端网页往往需要加载大量的数据。然而，如果一次性加载所有数据，可能会导致页面加载缓慢，甚至卡顿。

为了解决这个问题，我们可以使用上拉加载下一页的功能。当用户滚动到页面底部时，会自动加载下一页的数据。这样，就可以避免一次性加载所有数据，从而提高页面的加载速度。

Vue3 中实现上拉加载下一页

在 Vue3 中，我们可以使用内置的 Intersection Observer API 来实现上拉加载下一页的功能。Intersection Observer API 可以监听元素的可见性，当元素进入或离开视口时，会触发相应的事件。

我们可以利用这个特性，在页面底部放置一个元素，当这个元素进入视口时，就触发加载下一页数据的事件。

<template>
  <div id="app">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <div id="loading" ref="loading">加载中...</div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup() {
    const items = ref([])
    const loading = ref(false)
    const intersectionObserver = useIntersectionObserver(
      '#loading',
      (entries, observer) => {
        if (entries[0].isIntersecting && !loading.value) {
          loading.value = true
          // 加载下一页数据
          setTimeout(() => {
            items.value = items.value.concat([
              { id: 10, name: 'Item 10' },
              { id: 11, name: 'Item 11' },
              { id: 12, name: 'Item 12' },
            ])
            loading.value = false
          }, 1000)
        }
      },
      {
        threshold: 0,
      }
    )

    onMounted(() => {
      intersectionObserver.observe(loading.value)
    })

    onBeforeUnmount(() => {
      intersectionObserver.unobserve(loading.value)
    })

    return {
      items,
      loading,
    }
  },
}
</script>