vue3轻松实现无限滚动加载

需求场景

数据量过大，需要分批加载，然而在PC端不做分页竟然做滚动加载，这样的需求其实挺少见的，PC端更适合用分页去做。

调研

• better-scroll： 主要致力于解决移动端滚动场景，对我来说太重了
• vue-infinite-scroll：目前仍不支持vue3
• vue3-infinite-scroll-good：基于vue-infinite-scroll二次开发的vue3版本,所有用法和vue-infinite-scroll一致。并修复了一些bug，比如重复两次请求等问题。

效果展示

安装以及引入

yarn add vue3-infinite-scroll-good

// 全局注册
import infiniteScroll from 'vue3-infinite-scroll-good'
createApp(App).use(infiniteScroll).mount('#app');

核心讲解

• infinite-scroll-distance：根据元素底部和视口底部之间最小距离，触发事件
• infinite-scroll-disabled：是否禁用无限滚动
• v-infinite-scroll：到底部触发的事件
  我们只需要给元素设置最大高度，当滚动到infinite-scroll-distance最小距离的时候，触发v-infinite-scroll事件，
  请求前控制infinite-scroll-disabled为禁用，顺便加个loading增强用户体验，分页接口后端都会返回total，用length去判断
  是否要继续请求就行了。

代码示例

我这用jsonplaceholder接口来模拟无限滚动，直到数据满15条为止。很简单。

<div class="music-list" v-infinite-scroll="getData" :infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  <div class="music-card" v-for="item in dataList" :key="item.id">
    ...自定义内容
  </div>
  <div class="flex-c-c black" v-if="noMore">没有更多了</div>
</div>

import { ref, onMounted } from 'vue';
const busy = ref(false);
const page = ref(1);
const total = ref(15);
const dataList = ref([]);
const noMore = ref(false);

const getData = async () => {
  if (dataList.value.length === 15) {
    noMore.value = true;
    return;
  }
  busy.value = true;
  fetch(`https://jsonplaceholder.typicode.com/posts/${page.value}/comments`)
    .then(response => response.json())
    .then(json => {
      dataList.value = [...dataList.value, ...json]
      console.log(dataList.value)
      busy.value = false;
      page.value++;
    })
}

哦对了，我最近开发了一个叫牛马工作器的chrome拓展插件，很好玩哦，感兴趣的话，给我的公众号回复牛马即可免费获取。

我的微信公众号： 梨的前端小屋