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

相关文章

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

Mysql中深分页的五种常用方法整理

《Mysql中深分页的五种常用方法整理》在数据量非常大的情况下,深分页查询则变得很常见,这篇文章为大家整理了5个常用的方法,文中的示例代码讲解详细,大家可以根据自己的需求进行选择... 目录方案一:延迟关联 (Deferred Join)方案二:有序唯一键分页 (Cursor-based Paginatio

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Python中DataFrame转列表的最全指南

《Python中DataFrame转列表的最全指南》在Python数据分析中,Pandas的DataFrame是最常用的数据结构之一,本文将为你详解5种主流DataFrame转换为列表的方法,大家可以... 目录引言一、基础转换方法解析1. tolist()直接转换法2. values.tolist()矩阵

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js