vue3-seamless-scroll 监听数据滚动到底部

`vue3-seamless-scroll`是一个用于Vue 3应用中的无限滚动库，它提供了一种便捷的方式来处理滚动事件，特别是在数据加载和滚动到底部加载更多场景中。当你想要监听页面滚动到底部，以便自动加载更多数据，你可以使用`vue3-seamless-scroll`提供的`scroll-event`或`scroll-position`指令。

以下是使用`vue3-seamless-scroll`监听数据滚动到底部的基本步骤：

1. 安装`vue3-seamless-scroll`库：

   npm install vue3-seamless-scroll

2. 在你的Vue组件模板中，将滚动容器包裹在`<seamless-scroll>`组件中，并添加`v-loading`和`v-scroll-end`指令：

   <template>
     <div class="scroll-container">
       <seamless-scroll :data="items" ref="scrollRef">
         <div v-for="(item, index) in items" :key="index">{{ item }}</div>
       </seamless-scroll>
       <button @click="loadMore" v-if="loading">加载更多</button>
     </div>
   </template>

3. 在组件的script部分，设置数据源`items`，并初始化`scrollRef`和`loading`状态：

   import { ref, onMounted, emit } from 'vue';
   
   export default {
     data() {
       return {
         items: [], // 假设这是你的数据数组
         loading: false,
         lastItem: null, // 记录最后渲染的元素
       };
     },
     setup() {
       const scrollRef = ref(null);

       onMounted(() => {
         // 首次加载所有数据
         this.items = ...; // 根据实际情况填充数据

         // 当滚动结束时，检查是否加载了更多数据
         scrollRef.value.addEventListener('scroll-end', () => {
           if (scrollRef.value.isBottom()) {
             this.loadMore();
           }
         });
       });

       // 加载更多数据的方法
       function loadMore() {
         this.loading = true;
         // 加载更多数据的API请求，完成后更新items并清空loading标志
         fetchMoreData().then((newItems) => {
           this.items = [...this.items, ...newItems];
           this.lastItem = newItems[newItems.length - 1]; // 更新lastItem
           this.loading = false;
         });
       }

       return { scrollRef, loadMore };
     },
   };