前端开发中列表无限加载功能的实现与优化_前端滚动向下加载超过总页数不在请求接口-CSDN博客

本文链接：https://blog.csdn.net/jingling555/article/details/147518982

在如今的 Web 应用开发中，为了给用户提供更加流畅、高效的体验，许多应用都会采用列表无限加载的技术，比如常见的社交媒体动态列表、电商商品列表等。

下面，我将结合实际项目，详细介绍列表无限加载功能的实现过程。

一、实现原理

列表无限加载功能的核心原理是利用elementPlus提供的v-infinite-scroll指令，通过监听页面滚动事件，判断是否满足触底条件。

当满足触底条件时，增加页数参数，获取下一页的数据，并将新数据与老数据进行拼接，重新渲染列表，从而实现列表的无限加载效果。

在加载完成所有数据后，停止监听滚动事件，避免无效请求。

二、具体实现步骤

（一）准备接口

在实现无限加载之前，需要准备好获取数据的接口。以项目中的getSubCategoryAPI接口为例，它接收包含categoryId（分类 ID）、page（当前页数）、pageSize（每页数据量）和sortField（排序字段）等参数的对象，通过POST请求从服务器获取相应的数据。

/**
 * @description: 获取导航数据
 * @data { 
     categoryId: 1005000 ,
     page: 1,
     pageSize: 20,
     sortField: 'publishTime' | 'orderNum' | 'evaluateNum'
   } 
 * @return {*}
 */
export const getSubCategoryAPI = (data) => {
  return request({
    url:'/category/goods/temporary',
    method:'POST',
    data
  })

（二）初始化数据

在 Vue 组件中，定义用于存储商品列表数据的响应式变量goodList，并初始化请求数据对象reqData，设置初始的categoryId、page、pageSize和sortField。同时，定义一个用于判断是否加载完毕的响应式变量disabled，初始值设为false。

<script setup>
// 获取基础列表数据渲染
const goodList = ref([])
const reqData = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 20,
  sortField: 'publishTime'
})
// 判断是否加载完毕
const disabled = ref(false)
</script>

（三）加载更多数据的逻辑实现

定义加载更多数据的函数load，在函数内部，首先将reqData中的page值加 1，以获取下一页的数据。然后调用getSubCategoryAPI接口，并将新获取的数据与原有的goodList数据进行拼接。

最后，根据新获取数据的长度判断是否已经加载完所有数据，如果新数据长度为 0，则表示已全部加载完毕，将disabled设为true，停止后续的加载操作。

// 加载更多
const load = async () => {
  console.log('加载更多数据咯')
  // 获取下一页的数据
  reqData.value.page++
  const res = await getSubCategoryAPI(reqData.value)
  goodList.value = [...goodList.value, ...res.result.items]
  // 加载完毕 停止监听
  if (res.result.items.length === 0) {
    disabled.value = true
  }

（四）配置`v-infinite-scroll`指令

在模板中，使用v-infinite-scroll指令绑定load函数，并设置infinite-scroll-disabled属性为disabled。这样，当页面滚动到触底位置时，会自动调用load函数加载更多数据，并且在数据全部加载完毕后，停止触发加载操作。

<template>
  <div v-infinite-scroll="load" infinite-scroll-disabled="disabled">
    <!-- 商品列表展示部分 -->
    <div v-for="(item, index) in goodList" :key="index">
      <!-- 展示商品的具体信息，如图片、名称、价格等 -->
      <img :src="item.image" alt="商品图片">
      <p>{{ item.name }}</p>
      <p>{{ item.price }}</p>
    </div>
  </div>
</template>