【Vue】实现商品列表的无限加载

基础思路

1. 触底条件满足之后 page++，拉取下一页数据
2. 新老数据做数组拼接
3. 判断是否已经全部加载完毕，停止监听

步骤1：加载下一页数据

重构商品二级分类组件

注:v-infinite-scroll为elementPlus中Infinite Scroll无限滚动的自定义指令

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

//加载更多
const load = async () => {  
  // 获取下一页的数据
  reqData.value.page++
  console.log(reqData.value.page)
  const res = await getSubCategoryAPI(reqData.value)
  //新加载的数据与老数据进行拼接合并
  goodList.value = [...goodList.value, ...res.result.items]  
}
// 获取二级分类商品
const goodList = ref([])
const reqData = ref({
    categoryId: route.params.id,
    page: 1,
    pageSize: 20,
    sortField: 'publishTime'
})
const getGoodList = async () => {
    const res = await getSubCategoryAPI(reqData.value)
    goodList.value = res.result.items
}
onMounted(() => getGoodList())

步骤2：无数据停止加载

重构template与script,infinite-scroll-disabled也是Infinite Scroll的指令

<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++
  const res = await getSubCategoryAPI(reqData.value)
  //新加载的数据与老数据进行拼接合并
  goodList.value = [...goodList.value, ...res.result.items]
  // 加载完毕 停止监听
  if (res.result.items.length === 0) {
    disabled.value = true
  }
}