滚动分页实现

实现的滚动分页都是懒加载的形式

框架：Vue3+Vite

接口：axios

组件：arco design 的a-scrollar 滚动条组件

<a-scrollbar
          ref="scrollRef"
          style="overflow: auto; height: 100%"
          @scroll="onScroll"
        >
          <transportDetail
            v-for="(item, index) in cardList"
            :key="index"
            :data="item"
            class="mb20 detail"
            @click="handleClick(item)"
          >
          </transportDetail>
          <div v-if="isLoading" class="gray-title-bg">加载中...</div>
       </a-scrollbar>

1、纯前端的滚动分页

实现逻辑：从后端获取完整数据后，分页的在前端页面进行渲染，滚动的方式进行翻页

  /**
   *
   * @param isSending
   * @returns
   */
  const loadingSendList = async (isSending: boolean) => {
    const params = {
      code: searchSendBatchCode.value,
      isSending,
    }
    const infoRes = await selectData(params)
    allData.value = infoRes?.data?.list|| 0
  }

  /**
   * 加载数据
   * 根据搜索条件查询数据
   */
  const loadSearchData = async () => {
    const keyword = searchCode.value?.trim()
    const isNumeric = /^\d+$/.test(keyword) && keyword.length < 5
    if (isNumeric) {
      searchError.value = true
      createWarningMessage('请输入一个五位以上的编号')
      return
    }
    loadingSendList(false)
  }  

// 初始化的时候加载第一页
  const initData = () => {
    if (allData.value.length < pageSize.value) {
      sendBoxInfoList.value = allData.value
      return
    }
    sendBoxInfoList.value = allData.value.slice(0, pageSize.value)
    pageIndex.value = 1
  }

  /**
   * 滚动分页
   */
  const loadMore = () => {
    if (allData.value.length < pageSize.value) {
      sendBoxInfoList.value = allData.value
      return
    }
    const nextIndex = pageIndex.value * pageSize.value
    const nextData = allData.value.slice(nextIndex, nextIndex + pageSize.value)
    if (nextData.length > 0) {
      cardList.value.push(...nextData)
      pageIndex.value += 1
    }
  }

  const onScroll = (e: any) => {
    const el = e.target
    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 20) {
      // 已接近底部，加载更多
      loadMore()
    }
  }

2、后端实现分页

const loadingSendList = async () => {
    if (isLoading.value || allLoaded.value) return
    isLoading.value = true
    const params = {
      code: searchCode.value?.trim(),
      isSending: isSending.value,
    }

    await selectData(
      params,
      pageIndex.value,
      pageSize.value
    )
      .then((infoRes: any) => {
        const list = infoRes?.data?.list || []
        // 累加数据
        if (pageIndex.value === 1) {
          cardList.value = cloneDeep(list)
        } else {
          cardList.value.push(...list)
        }
        // 判断是否已经全部加载完成
        const loadedCount = cardList.value.length
        if (loadedCount >= parseInt(infoRes?.data?.total, 10)) {
          allLoaded.value = true
        } else {
          pageIndex.value += 1
        }
      })
      .finally(() => {
        isLoading.value = false
      })
  }

  /**
   * 滚动到底部加载更多
   */
  const onScroll = (e: any) => {
    const el = e.target
    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 20) {
      loadingSendList()
    }
  }