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

2024-08-22 22:12

本文主要是介绍vue3+ts+vant4 列表下拉刷新+分页加载,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果图

主要代码:

<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]'}}
}

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

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

这篇关于vue3+ts+vant4 列表下拉刷新+分页加载的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1097542

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo