通过vue3 + TypeScript + uniapp + uni-ui 实现下拉刷新和加载更多的功能

news2024/9/21 2:40:22

效果图:

核心代码:

<script lang="ts" setup>
	import { ref, reactive } from 'vue';
	import api from '@/request/api.js'
			import empty from '@/component/empty.vue'
	import { onLoad,onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

	let form = ref({
		type:2,
		pageNo: 1,
		pageSize: 10
	})

	let listData = ref([]);
	let total = ref(0);
	let status = ref('loadmore');


	const requestGetListData = () => {

		api.getFlawOrCheckList(form.value).then(res => {
			console.log("requestGetCourse", res)
			listData.value = [...listData.value, ...res.result.records]

			total.value = res.result.total

			if (form.value.pageNo >= total.value / form.value.pageS

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1933383.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Gradio技术入门(一)

Gradio是一个开源的Python库&#xff0c;旨在让创建机器学习模型的应用界面变得简单快捷。 官网&#xff1a;格罗特 (gradio.app) 一、基本概述 1&#xff0c;技术概述 1. 定义与用途 Gradio通过Python生成一套HTML页面&#xff0c;其中编写好了大部分的组件&#xff0c;主…

《大数据基础》相关知识点及考点,例题

1.6大数据计算模式 1、MapReduce可以并行执行大规模数据处理任务&#xff0c;用于大规模数据集&#xff08;大于1TB&#xff09;的并行运算。MapReduce 极大地方便了分布式编程工作&#xff0c;它将复杂的、运行于大规模集群上的并行计算过程高度地抽象为两个函数一一Map和Redu…

数据库系统概论:数据库完整性

引言 数据库是现代信息系统的心脏&#xff0c;数据的准确性和一致性对于业务流程至关重要。数据库完整性是确保数据质量的基石&#xff0c;它涵盖了数据的正确性、相容性和一致性&#xff0c;是数据安全与业务连续性的保障。 数据库完整性是指数据的精确性、可靠性和逻辑一致…

Gitee使用教程2-克隆仓库(下载项目)并推送更新项目

一、下载 Gitee 仓库 1、点击克隆-复制代码 2、打开Git Bash 并输入复制的代码 下载好后&#xff0c;找不到文件在哪的可以输入 pwd 找到仓库路径 二、推送更新 Gitee 项目 1、打开 Git Bash 用 cd 命令进入你的仓库&#xff08;我的仓库名为book&#xff09; 2、添加文件到 …

【Unity】升级至API34,编译报错Java Runtime版本问题

文章目录 一、背景二、问题描述三、原因和解决方法 一、背景 1、Unity 2021.3.33f1 2、Firebase 11.7.0 3、Max Unity 6.5.2 3、升级至API-34 二、问题描述 错误信息 Could not load custom lint check jar file C:\Users\xxx.gradle\caches\transforms-2\files-2.1\b27e2aac8…

pnpm build打包时占内溢出

这两天在打包H5网页的时候&#xff0c;失败&#xff0c;总是提示下方错误&#xff0c;试了多种方法下方的亲测有效 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 严重错误&#xff1a;堆限制附近标记压缩无效分…

【字幕】字幕特效入门

前言 最近两周调研了一下字幕特效的底层程序逻辑&#xff0c;因为工作内容的原因&#xff0c;就分享几个自己找的链接具体细节就不分享了&#xff0c;CSDN也是我的个人笔记&#xff0c;只记录一些简单的内容用于后续自己方便查询&#xff0c;顺便帮助一下正在苦苦查阅资料入门…

.net core appsettings.json 配置 http 无法访问

1、在appsettings.json中配置"urls": "http://0.0.0.0:8188" 2、但是网页无法打开 3、解决办法&#xff0c;在Program.cs增加下列语句 app.UseAntiforgery();

数据库系统概论:数据库系统模式

数据库系统在我们的数字世界中扮演着至关重要的角色&#xff0c;无论是个人设备还是企业级应用&#xff0c;数据的有效管理和访问都是必不可少的。而数据库系统的模式结构是确保数据一致性和可访问性的关键组成部分。 数据库系统模式 基本概念 型和值 数据模型中有 型(type…

数据结构之细说链表

1.1顺序表的问题以及思考 经过上一篇顺序表的学习&#xff0c;我们知道顺序表还是有很多缺点 顺序表的缺点&#xff1a; 1.中间/头部的插入删除&#xff0c;实际复杂度为O(N) 2.增容需要申请新空间&#xff0c;拷贝数据&#xff0c;释放旧空间。会有不小的消耗 3.扩容一般…

【ECharts】使用 ECharts 处理不同时间节点的数据系列展示

使用 ECharts 处理不同时间节点的数据系列展示 在数据可视化中&#xff0c;我们经常遇到这样的问题&#xff1a;不同数据系列的数据点在时间轴上并不对齐。这种情况下&#xff0c;如果直接在 ECharts 中展示&#xff0c;图表可能会出现混乱或不准确。本文将通过一个示例代码&a…

vue3+vite从零架构:写组件、构建、打包并上传个人前端组件库至私有npm仓库最终在自己项目中下载并使用(超详细的流程,小编已实现)

目录 第一章 前言 第二章 准备工作 第三章 封装组件 3.1 文件结构 3.2 编写组件代码 第四章 项目打包 第五章 发布到npm 5.1 npm准备工作 5.2 发布npm包 ​编辑 第六章 从npm安装使用 第一章 前言 在我们很多开发过程中&#xff0c;不管是使用vue还是react&#x…

【Docker】Docker-harbor私有仓库部署与管理

目录 一.Harbor 概述 1.什么是Harbor 2.Harbor的特性 3.Harbor的构成 二.Harbor 部署 1.部署 Docker-Compose 服务 2.部署 Harbor 服务 3.启动 Harbor 4.创建新项目 5.创建用户 6.本地上传镜像 7.从Harbor下载镜像 三.镜像同步 1.定时拉取 2.主动推送 四.管理 …

掌握这些技巧,让你成为画册制作高手

在数字化的时代背景下&#xff0c;电子画册以其便捷的传播方式、丰富的视觉表现形式&#xff0c;赢得了大众的喜爱。它不仅能够在个人电脑上展现&#xff0c;还能通过智能手机、平板电脑等多种移动设备随时随地被访问和浏览。这种跨平台的支持&#xff0c;使得无论你身处何地&a…

基于STM32智能电子锁设计

1.简介 随着时代的高速发展&#xff0c;家居安全也成为人们日常生活中的一个安全问题。目前传统的门锁使用的是机械密码&#xff0c;在安全性方面表现不佳。这些缺点可以通过改用智能电子密码锁来弥补。智能电子锁是一种使用了现代电子技术的高科技产品&#xff0c;它的出现解决…

【iOS】类对象的结构分析

目录 对象的分类object_getClass和class方法isa流程和继承链分析isa流程实例验证类的继承链实例验证 类的结构cache_t结构bits分析实例验证属性properties方法methods协议protocolsro类方法 类结构流程图解 对象的分类 OC中的对象主要可以分为3种&#xff1a;实例对象&#xf…

江协科技51单片机学习- p27 I2C AT24C02存储器

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

动手学深度学习——5.卷积神经网络

1.卷积神经网络特征 现在&#xff0c;我们将上述想法总结一下&#xff0c;从而帮助我们设计适合于计算机视觉的神经网络架构。 平移不变性&#xff08;translation invariance&#xff09;&#xff1a;不管检测对象出现在图像中的哪个位置&#xff0c;神经网络的前面几层应该对…

C++从入门到起飞之——类的定义/实例化 全方位剖析!

个人主页&#xff1a;秋风起&#xff0c;再归来~ C从入门到起飞 个人格言&#xff1a;悟已往之不谏&#xff0c;知来者犹可追 克心守己&#xff0c;律己则安&#xff01; 目录 1.类的定义 1.1、类定义格式 1.2、访问限定符 1.3、类域 2.实例化 2.…

基于Vue CLI 3构建Vue3项目(Vue2也可参考)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…