一个独立的组件全局：如果他可见，通知加载下一页数据，如果加载成功它自己就会被挤到下边—又变成了不可见了。
image.png
注意：它自己不保存数据

1.组件代码

src/components/xtx-infinite-loading.vue

  1. <template>
  2.   <div class="xtx-infinite-loading" ref="container">
  3.     <!-- 正在加载数据时显示 -->
  4.     <div class="loading" v-if="isLoading">
  5.       <span class="img"></span>
  6.       <span class="text">正在加载...</span>
  7.     </div>
  8.     <!-- 数据全部加载完毕时显示 -->
  9.     <div class="none" v-if="isFinished">
  10.       <span class="text">亲，没有更多了</span>
  11.     </div>
  12.   </div>
  13. </template>
  15. <script>
  16. import { ref } from 'vue'
  17. import { useIntersectionObserver } from '@vueuse/core'
  18. export default {
  19.   name: 'XtxInfiniteLoading',
  20.   emits: ['load'],
  21.   props: {
  22.     // 是否在加载中
  23.     isLoading: {
  24.       type: Boolean,
  25.       default: false
  26.     },
  27.     // 数据全部加载完毕
  28.     isFinished: {
  29.       type: Boolean,
  30.       default: false
  31.     }
  32.   },
  33.   setup (props, { emit }) {
  34.     const container = ref(null)
  35.     useIntersectionObserver(
  36.       container,
  37.       ([{ isIntersecting }], dom) => {
  38.         if (isIntersecting) {
  39.           // 只有数据不在加载中且还没全部结束时才触发load事件
  40.           if (props.isLoading === false && props.isFinished === false) {
  41.             emit('load')
  42.           }
  43.         }
  44.       },
  45.       {
  46.         threshold: 0
  47.       }
  48.     )
  49.     return { container }
  50.   }
  51. }
  52. </script>

2.组件使用

sub.vue

  1. <!-- 列表 -->
  2. <div class="sort-list-container">
  3.   <GoodsItem v-for="good in goodsList" :key="good" :good="good" />
  4. </div>
  5. <!-- 上拉加载 -->
  6. <XtxInfiniteLoad @load="loadData" :isFinished="isFinished" :isLoading="isLoading"/>
  8.  setup(){
  9. //这里使用了逻辑抽离
  10.     const { subCate } = useSubCate()
  11. +    const { isFinished, isLoading, loadData, goodsList, hFilterChange, hSortChange } = useLoadData()
  13. +    return { subCate, goodsList, hFilterChange, hSortChange, loadData, isLoading, isFinished }
  15.  }

3.修改useLoaddata

  2. const useLoadData = () => {
  3.   const route = useRoute()
  4.   // 请求参数
  5.   let reqParams = {
  6.     categoryId: route.params.id,
  7.     inventory: null, // 是否只显示有库存
  8.     onlyDiscount: null, // 是否只显示有优惠
  9.     brandId: null, // 品牌名称
  10.     attrs: [], // 商品属性
  11.     sortField: null, // 排序类别
  12.     sortMethod: null, // 排序的方式
  13.     page: 1,
  14.     pageSize: 20
  15.   }
  17.   const goodsList = ref([]) // 保存查询结果
  19. +  const isLoading = ref(false)
  20. +  const isFinished = ref(false)
  21.   const loadData = () => {
  22.  +   isLoading.value = true
  24.     findSubCategoryGoods(reqParams).then(data => {
  25.       console.log('findSubCategoryGoods', data)
  26.       // 新数据要追加到数组中
  27. +      goodsList.value.push(...data.result.items)
  28.       // 页码加1
  29. +      reqParams.page++
  30.       // 判断是否加载完成
  31. +      if (data.result.items.length === 0) {
  32. +        isFinished.value = true
  33.       }
  34. +      isLoading.value = false
  35.     })
  36.   }
  37.   const hFilterChange = (filterParam) => {
  38.     console.log('父组件收到了筛选条件', filterParam)
  39.     // 更新条件
  40.     // reqParams.brandId = filterParam.brandId
  41.     // reqParams.attrs = filterParam.attrs
  42.     reqParams = { ...reqParams, ...filterParam }
  43.     // 重发请求
  44.     loadData()
  45.   }
  47.   const hSortChange = (sortParam) => {
  48.     console.log('父组件收到了排序条件', sortParam)
  49.     // 更新条件
  50.     // reqParams.inventory = sortParam.inventory
  51.     // reqParams.onlyDiscount = sortParam.onlyDiscount
  52.     reqParams = { ...reqParams, ...sortParam }
  53.     // 重发请求
  54.     loadData()
  55.   }
  57.   loadData()
  59.   return { isFinished, isLoading, goodsList, hFilterChange, hSortChange, loadData }
  60. }