vue项目如何实现列表无限加载

目录

一、应用场景

二、核心实现逻辑

三、实战（小兔鲜）

四、优化

---

一、应用场景

最常见的应用场景就是在淘宝，京东等购物网站，我们会发现在商品浏览页一直滑动到底部的时候，商品会一直出现，可以一直加载。那么如何实现这样的功能呢？其实很简单！接着往下看

二、核心实现逻辑

使用elementPlus提供的v-infinite-scroll指令来监听是否满足触底条件，满足加载条件的时候就让页数参数加1，然后去获取下一页数据，最后做一个新老数据的拼接渲染

https://element-plus.org/zh-CN/component/infinite-scroll.html，可以查阅官方文档去了解该指令具体实现

三、实战（小兔鲜）

1.在index.vue文件准备好商品列表

<div class="body" >
         <!-- 商品列表-->
          <GoodsItem v-for="good in goodList" :good="good" :key="good.id">
          </GoodsItem>
 </div>

2.根据官方文档实例，去补充代码

首先在class="body"后面绑定v-infinite-scroll="load"指令 ：

 <div class="body" v-infinite-scroll="load" >
         <!-- 商品列表-->
          <GoodsItem v-for="good in goodList" :good="good" :key="good.id">
          </GoodsItem>
 </div>

 然后在<script></script>中补充load方法：

const load = async()=>{
  // 测试
  console.log("..........加载更多选项.........")
 
}

测试看结果：当页面滑动到底部，就会consle这么一句话

 

测试通过后，继续在load方法内部写逻辑：

const load = async()=>{
  // 测试
  console.log("..........加载更多选项.........")
  // 获取下一页数据
  reqData.value.page++
  // 新老数据做一个拼接，现获取老数据res，在获取新数据，然后拼接数组
  const res = await getSubCategoryAPI(reqData.value)
  // 拼接数组，使用展开运算符...
  goodList.value = [...goodList.value , ...res.result.items]
 
}

 然后测试一下，发现列表可以不断加载，切换到Network看，我们发现右侧的page从原来的1变成了14，说明我们不断获取到下一页的数据了，并且完成了新老数据的拼接渲染！

最后我们来设置监听来停止加载，补充disabled方法

利用 :infinite-scroll-disabled="disabled"来禁用加载

<div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
         <!-- 商品列表-->
          <GoodsItem v-for="good in goodList" :good="good" :key="good.id">
          </GoodsItem>
 </div>

 完整代码

// 无限加载方法
const disabled = ref(false)
const load = async()=>{
  // 测试
  console.log("..........加载更多选项.........")
  // 获取下一页数据
  reqData.value.page++
  // 新老数据做一个拼接，现获取老数据res，在获取新数据，然后拼接数组
  const res = await getSubCategoryAPI(reqData.value)
  // 拼接数组，使用展开运算符...
  goodList.value = [...goodList.value , ...res.result.items]
  // 加载完毕，判断条件是数据长度为0
  if (res.result.items.length === 0){
    disabled.value=true
  }
}

通过测试，可以发现列表全部加载完毕的时候， 就会停止加载

四、优化

通过上面的列子我们可以发现，在滚动到页面下方的时候，切换回首页，滚动条还是在页面下方，而不会自己回到页面顶部，这个时候我们可以做一个页面优化，让滚动条回到页面顶部，回到最开始的地方（定制路由）。

定制路由行为：在不同路由切换的时候，可以自动滚动到页面的顶部，而不是停留在原先的位置。vue-router支持scrollBehavior配置项，可以指定路由切换时的滚动位置

 scrollBehavior(){
        return{
            top:0
        }
 }

在router文件夹的index.js文件补充以下代码，配置路由行为，跟routers是同级的