vue3+ts+vant4 列表下拉刷新+分页加载

效果图

主要代码：

<van-pull-refresh
  v-model="refreshing"
  @refresh="handleRefresh"
  pulling-text="下拉释放刷新"
  loosing-text="下拉释放刷新"
  loading-text="加载中"
  >
  <van-list
     v-model:loading="loading"
     :finished="finished"
     finished-text="没有更多了"
     loading-text="加载中"
     @load="onLoad"
     >
     <div class="pt-8 px-2">
        <div
           v-for="item in historyList"
           :key="item.external_id"
           class="border border-solid border-[#E2E8F0] rounded-xl shadow-[0_5px_16px_2px_#F1F5F9] px-5 py-4 mb-5 cursor-pointer">
          <div class="flex justify-between items-center border-b border-dashed border-[#D2D2D2] pb-3">
             <div class="flex items-center">
                <img src="@/assets/images/date.png" alt="" class="w-7" />
                <span class="text-[#888] ml-2">{{ item.create_time }}</span>
             </div>
             <div class="px-2 py-1 rounded-md":class="getStatusStyle(item.status).style">
                {{ getStatusStyle(item.status).desc }}
             </div>
             </div>
             <div class="flex items-center justify-between text-[#333] mt-3">
                <span>{{ item.account_phone }}</span>
                <span class="font-semibold">{{ item.amount }}</span>
              </div>
            </div>
         </div>
      </van-list>
   <van-back-top right="15vw" bottom="10vh" />
</van-pull-refresh>

const loading = ref(false) //加载状态
const finished = ref(false) //是否加载完成
const refreshing = ref(false)
const page = ref(1)
const pageSize = ref(5)
interface HistoryList {
  external_id: string
  create_time: string
  status: number
  account_phone: string
  amount: string
}
const historyList = ref<HistoryList[]>([])

const onLoad = async () => {
//此处为分页加载方法，页面一进来就会请求
  try {
    const params = {
      page: page.value,
      page_size: pageSize.value
    }
    const result = await xxxxx(params)
    if (result?.data?.data?.length == 0) {
      finished.value = true //数据为空，查询完成
    } else {
      historyList.value = historyList.value.concat(result.data.data) //数据拼接
      page.value++ //页码+1
    }
  } catch (error) {
    finished.value = true //接口发生错误的时候，让查询完成，不然会死循环
  } finally {
    loading.value = false //loading结束
  }
}

const handleRefresh = async () => {
  //此处为下拉刷新方法，一进方法refreashing就为true
  page.value = 1 //下拉刷新页数置为1
  historyList.value = [] //清空数据
  finished.value = false //标记加载状态为未完成
  loading.value = true //加载中
  await onLoad()
  refreshing.value = false //所以加载完接口就置为false
}

const getStatusStyle = (status: number) => {
//此处为设置状态的样式，css使用的是tailwindcss
  switch (status) {
    case 0:
      return {
        desc: '处理中',
        style: 'text-[#FF9249] bg-[#FCEEE3]'
      }
    case 1:
      return {
        desc: '成功',
        style: 'text-[#6FC682] bg-[#E7F6F1]'
      }
    default:
      return {
        desc: '失败',
        style: 'text-[#FF5A5A] bg-[#FCE3E3]'
      }
  }
}

在写这块需求过程中，写了个死循环导致报错，找了大半天才找到问题，已解决，与以上内容无关

有兴趣可以看看本人另一篇博客
记一次找不到的死循环-CSDN博客