觸底加載的方式

長列表需要觸底加載，觸底顯示loading，加載後loading小時
若長列表為空，則顯示空狀態
加載到底，沒有更多分頁，則顯示“沒有更多了”
這裏我基於vant封裝了一個組件，可直接使用

<script setup lang='ts'>
  const props = defineProps({
    text: {
      type: String,
      default: '',
    },
    hasMore: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    length: {
      type: Number,
      default: 0,
    },
  })
</script>

<template>
  <div flex justify-center>
    <!-- loading -->
    <van-loading v-if="props.loading" />
    <!-- 非加載 列表有值 沒有下一頁 -->
    <div v-if="!props.loading && props.length && !hasMore" class="title">
      沒有更多了
    </div>
    <!-- 空狀態-文字版 -->
    <div v-if="!props.loading && !props.length && text" class="title">
      {{ props.text }}
    </div>
    <!-- 空狀態-圖標版 -->
    <van-empty v-if="!props.loading && !props.length && !text" image-size="5rem" description="暫無數據" />
  </div>
</template>

<style lang="less" scoped>
  .title {
    color: #969799;
    font-size: 12px;
  }
</style>

1、loading中的時候顯示加載圖標，加載完後loading消失
2、如果當前頁面無數據，則顯示空狀態，空狀態中文字的優先級高於圖片
3、如果沒有更多，則文字顯示
這裏面每一個組件的狀態都不同，根據條件只會顯示其中一種狀態
主要通過三個變量控制
● text 是否自定義文字
● loading 是否加載中
● length 列表數據長度
● hasMore 是否有更多
頁面使用

<LoadingEmpty :loading="loading" :length="list.length" :hasMore="hasMore" />

<script setup lang='ts'>
  import { geGoodsListAPI } from '@/api/model/goods'
  import { useInfiniteScroll } from '@/hook/useInfiniteScroll'

  // 加載中
  const loading = ref(false)
  // 是否有更多
  const hasMore = ref(true)
  // 列表
  const list = ref([])
  // 分頁
  const pageInfo = ref({
    pageNumber: 1,
    pageSize: 10,
    total: 0,
  })
  // 查列表
  async function getGoodsList() {
    try {
      let params = {
        pageNumber: pageInfo.value.pageNumber,
        pageSize: pageInfo.value.pageSize,
      }
      loading.value = true
      let res = await geGoodsListAPI(params)
      list.value.push(...res.data.list)
      pageInfo.value.total = res.data.total
      if (pageInfo.value.pageNumber * pageInfo.value.pageSize >= pageInfo.value.total) {
        hasMore.value = false
      }
      else {
        hasMore.value = true
      }
    }
    finally {
      loading.value = false
    }
  }

  // 界面觸底加載時hooks
  // 該hooks如果滾動條觸底，且有更多的場合，會自動調用傳入的函數
  useInfiniteScroll(loading, hasMore, pageInfo, getGoodsList)

  // 初始化加載一次
  geGoodsListAPI()
</script>

滾動到底的時候，根據是否有更多，默認顯示loading狀態，這是初始化就是應該顯示loading
當初始化獲取getList接口後，根據返回的數據更新狀態

非觸底加載

有的時候我們僅需要兩種狀態
1、loading 是否加載中
2、length 是否為空
這在首頁不需要加載更多的版塊中常見，我們只需要兩種狀態判斷即可

<script setup lang='ts'>
  const props = defineProps({
    text: {
      type: String,
      default: '',
    },
    loading: {
      type: Boolean,
      default: false,
    },
    length: {
      type: Number,
      default: 0,
    },
  })
</script>

<template>
  <div flex justify-center>
    <!-- loading -->
    <van-loading v-if="props.loading" />
    <!-- 空狀態-文字版 -->
    <div v-if="!props.loading && !props.length && text" class="title">
      {{ props.text }}
    </div>
    <!-- 空狀態-圖標版 -->
    <van-empty v-if="!props.loading && !props.length && !text" image-size="5rem" description="暫無數據" />
  </div>
</template>

<style lang="less" scoped>
  .title {
    color: #969799;
    font-size: 12px;
  }
</style>

<LoadingEmpty :loading="loading" :length="list.length" />