当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 19:59:25

效果图

主要代码：

<van-pull-refreshv-model="refreshing"@refresh="handleRefresh"pulling-text="下拉释放刷新"loosing-text="下拉释放刷新"loading-text="加载中"><van-listv-model:loading="loading":finished="finished"finished-text="没有更多了"loading-text="加载中"@load="onLoad"><div class="pt-8 px-2"><divv-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: stringcreate_time: stringstatus: numberaccount_phone: stringamount: 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就为truepage.value = 1 //下拉刷新页数置为1historyList.value = [] //清空数据finished.value = false //标记加载状态为未完成loading.value = true //加载中await onLoad()refreshing.value = false //所以加载完接口就置为false
}

const getStatusStyle = (status: number) => {
//此处为设置状态的样式，css使用的是tailwindcssswitch (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]'}}
}

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