【Vue3】利用VueUse实现useInfiniteScroll虚拟滚动操作-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue3】利用VueUse实现useInfiniteScroll虚拟滚动操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我们先来看一下效果展示

useinfinitescroll,vue.js,前端,javascript

一、什么是无限滚动？关键是什么？如何使用？需要注意的是什么？

1、infiniteScroll无限滚动是一种在网页或应用程序中实现动态加载内容的技术，它允许用户在滚动页面时无需点击分页或刷新按钮自动加载更多内容，从而提供更流畅的用户体验，传统的分页加载需要用户点击下一页或下载更多的按钮来获取更多内容，而无限滚动通过监听用户的滚动行为，当用户接近页面底部时，自动触发加载新数据，将其追加到当前页的尾部，这样用户就可以
无限的滚动浏览内容，而不需要中断浏览体验，去手动加载

2、无限滚动通常用于需要展示大量数据的页面，比如社交媒体的动态消息流，商品列表、图片库等，它可以减少用户的点击操作提高浏览效率

3、实现无限滚动的关键，是通过监听滚动事件，向服务器请求新的数据，当滚动达到一定的预值时，向服务器发送用户请求，获取新的数据，并将其插入页面当中，这样就实现了无缝加载新内容的效果

4、需要注意的是：在加载数据时要合理控制数据加载频率，避免过于频繁的请求数据，以免影响性能和用户体验，同时还需要处理好加载错误和异常情况，
保证用户可以正常的浏览数据

二、使用JSONPlaceholder进行在线模拟数据【为了方便】

入口：JSONPlaceholder

useinfinitescroll,vue.js,前端,javascript
注：作者这里使用的 /photos 接口

三、创建api/getPhotos.ts文件夹配置axios

import axios from 'axios';
const getPhotos = async(page:number ,limit:number) => {
    const result = await axios.get(
    //这个接口就是上面从JSONPlaceholder]模拟数据的接口
        `https://jsonplaceholder.typicode.com/photos?_page=${page}&_limit=${limit}`
    )
    return result.data;
}
export default getPhotos;

四、重点：VueUse第三方功能类库

入口：VueUse

1、VueUse第三方功能类库，提供了一些可复用的Vue 组合式API函数和自定义的指令，以便帮助开发者更高效的去构建vuejs的应用程序
2、vueUse的目标的通过提供常用的功能和模块增强vuejs应用程序的开发体验，它包含了大量的实用工具和功能涵盖了从状态管理、副作用处理、表单处理、动画、浏览器API等各方面的功能

导入模块
import { useInfiniteScroll } from "@vueuse/core";

五、全部代码实现

创建InfiniteScroll 组件

<template>
<ul ref="listEL" class="container">
    <div v-for="item in photosList" :key="item.id" class="item">
      <h2>{{ item.id }} {{ item.title }}</h2>
      <img :src="item.thumbnailUrl" class="thumb" />
    </div>
    <div v-if="fetchingData" class="fetchingData">正在请求更多数据中.....</div>
  </ul>
</template>

逻辑

<script setup lang="ts">
import { onMounted, ref } from "vue";
import getPhotos from "../api/getPhotos";
// 引入useInfiniteScroll
import { useInfiniteScroll } from "@vueuse/core";
//设置列表的元素内容,使listEL的类型是HTMLElement或null
const listEL = ref<HTMLElement | null>(null);
const limit = ref(10);
const page = ref(1);
interface Iphoto {
  albumId: number;
  id: number;
  url: string;
  title: string;
  thumbnailUrl: string;
}
const photosList = ref<Iphoto[]>([]);
const fetchingData = ref(false);
const canLoadMore = ref(true);

const getPhotosOnScroll = async () => {
    // 中断处理
  if (!canLoadMore.value || fetchingData.value) return;
  fetchingData.value = true;
  //延迟请求
  await new Promise((resolve) => setTimeout(resolve, 2000));
  //滚动图片的内容
  const newPhotos = await getPhotos(page.value, limit.value);
  if(newPhotos.length < limit) {
    canLoadMore.value = false;
  }
  photosList.value = [...photosList.value, ...newPhotos];
  page.value++;
  fetchingData.value = false;
};

useInfiniteScroll(
  listEL,
  async () => {
    await getPhotosOnScroll();
  },
  {
    distance: 15,
  }
);
</script>

样式

<style lang="scss" scoped>
.container{
    overflow-y: scroll;
    height: 650px;
    margin-top: 20px;
    padding: 5px;
    .item{
        height: 150px;
        // display: flex;
        // flex-direction: column;
        margin-bottom: 60px;
    }
    .thumb{
        height: 150px;
        width: 150px;
    }
    .fetchingData {
        text-align: center;
        color: gray;
        background-color: white;
        padding: 1rem;
        margin: 0;
    }
}
</style>

App.vue ——引入InfiniteScroll 组件

<template>
  <div>
    <h1>利用VueUse实现Infinite实现无限滚动</h1>
    <InfiniteScroll />
  </div>
</template>
<script setup>
import InfiniteScroll from './components/infiniteScroll.vue'

</script>
<style scoped>
</style>