商品列表无限加载

本来以为是一件很难的问题，结果并不是很难，反而有一点简单到不可思议！！！

1、参考Element Plus

Element Plus中的无限滚动 Infinite Scroll 无限滚动 | Element Plus

2、代码展示

 <div  class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
    <!-- 商品列表-->
    <GoodsItem v-for="goods in goodList" :goods="goods" :key="goods.id" />
</div>
<!-- 
	v-infinite-scroll	滚动到底部时，加载更多数据
	infinite-scroll-disabled	是否禁用
-->

// 获取基础列表数据渲染; reqData向接口中传输数据
const goodList = ref([]);
const reqData = ref({
  catrgoryId: route.params.id,
  page: 1,
  pageSize: 20,
  sortField: "publishTime",
});

//加载更多
let disabled = ref(false);//初始时为false正常加载
const load = async () => {
   //获取下一页数据
  reqData.value.page++;
  const res = await getSubCategoryAPI(reqData.value);
   //getSubCategoryAPI接口中封装好的方法用来获取数据
    
  goodList.value = [...goodList.value, ...res.result.items];
   /**
    * ...goodList.value 使用展开运算符（spread operator）将 goodList.value 
数组中的元素展开为一个新数组。
	* ...res.result.items 同样使用展开运算符将 res.result.items 
数组中的元素展开为一个新数组。
	* 使用 [] 创建一个新数组，将展开的 goodList.value 数组和 res.result.items 
数组的元素合并到新数组中。
   */
    
  //加载完毕 停止监听
  if (res.result.items === 0) {
    disabled = true;
  }
};



//封装的接口方法
/**
* @description: 获取导航数据
* @data {
    catrgoryId: 1005000,
    page: 1,
    pageSize: 20,
    sortField: "publishTime"|"orderNum"|"evaluateNum",
} 
* @return {*}
*/
export const getSubCategoryAPI = (data) => {
    return http({
        url: '/category/goods/temporary',
        method: 'POST',
        data
    });
}

//每次只获取二十条数据