vant-list的使用总结

最近在做一个移动端H5的项目，使用vue3+vant4，遇到了列表的渲染问题，并封装成一个完善的hook

基本使用

<template>
  <van-nav-bar :title="title" left-arrow @click-left="handleBack" />
  <van-list
    style="height: 100vh"
    v-model:loading="loading"
    :error="error"
    error-text="请求失败，点击重新加载"
    :finished="finished"
    finished-text="没有更多了"
    @load="getList"
  >
    <div class="list-wrapper">
      ***
    </div>
  </van-list>
</template>
<script lang="ts" setup>
import { useList } from './hook'
/******************************** hooks *********************************************/
const { title, handleBack, loading, error, finished, list, getList } = useList()
/******************************** hooks end *********************************************/
</script>
<style lang="scss" scoped>

</style>

hook 文件

import { xxApi } from '@/api/xxApi'

type IList = {
  ent_id: string
  ent_name: string
  fa_ren: string
  logo: string
  reg_cap: number
}[]

export const useList = () => {
  const route = useRoute()
  const router = useRouter()
  const loading = ref(false)
  const error = ref(false)
  const finished = ref(false)
  const list = ref<IList>([])
  const title = ref(route.meta!.title as string)
  const queryParams = reactive({
    code: route.query.code,
    region: '500000',
    current: 1,
    size: 10,
  })

  /**获取列表 */
  const getList = () => {
    xxApi(queryParams)
      .then((res) => {
        const { total, records } = res.data
        // 判断是否没有数据了
        if (list.value.length >= total) {
          finished.value = true
        } else {
          list.value = list.value.concat(records)
          queryParams.current += 1
        }
      })
      .finally(() => {
        loading.value = false
      })
      .catch((e) => {
        error.value = true
      })
  }

  /**返回上一级 */
  const handleBack = () => {
   
    router.go(-1)
  }
  
  return {
    title,
    loading,
    error,
    finished,
    list,
    handleBack,
    getList,
  }
}

遇到的问题

1.一直触发请求

解决：添加样式 style="height: 100vh"

2.请求接口，后端报错，一直触发请求

解决：添加样式 :error="error"

ok！