助你轻松搞定Vue3无限滚动

2024-02-04 18:44:02

无限滚动，一种在滚动到底部时自动加载更多内容的交互方式，让用户体验更加流畅。本篇文章将手把手教你如何在Vue3中实现无限滚动。

1. 安装vue3-infinite-scroll库

npm install vue3-infinite-scroll --save

2. 引入并注册

在main.js文件中，引入并注册vue3-infinite-scroll库：

import InfiniteScroll from 'vue3-infinite-scroll';

app.component('InfiniteScroll', InfiniteScroll);

3. 使用无限滚动指令

在需要使用无限滚动的组件中，使用v-infinite-scroll指令：

<template>
  <div class="container">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useInfiniteScroll } from 'vue3-infinite-scroll';

export default {
  setup() {
    const items = ref([]);
    const { loadMore } = useInfiniteScroll();

    async function fetchMore() {
      // 发起网络请求获取更多数据
      const res = await fetch('...');
      const data = res.data;
      items.value = [...items.value, ...data];
    }

    // 当滚动到底部时调用loadMore方法
    loadMore(() => fetchMore());

    return {
      items
    }
  }
}
</script>