uniapp 分页

在app中实现分页效果的时候建议使用scroll-view标签

在data中定义好分页,从接口中获取一共的条数,

	pageInfo: {
					pageNum: 1,
					pageSize: 10,
					messageCode: null,
				},
total: 0,

在一进入页面就请求方法或者接口获取到条数

onLoad中调用这个方法

	onLoad() {
			this.listInit();
		},
		listInit() {
				this.pageInfo.pageNum = 1
				this.list = []
				this.isBottom = false
				this.调用方法名称()
			},

1.在标签中写滑动方法

<scroll-view :refresher-threshold="100" @scrolltolower="lowerBottom" :style="{height:swiperHeight}"
				scroll-y="true" class="scroll-Y">
</scroll-view>
			<view class="text-center" v-if="showMoreData">
					<!-- {{isBottom?'没有更多数据了~':'下拉加载更多'}} -->
					没有更多数据了
				</view>

2.滚动到底部之后触发方法

		// 滚到底部
			lowerBottom() {
				if (this.pageInfo.pageNum * this.pageInfo.pageSize >= this.total) return this.showMoreData = true
				this.pageInfo.pageNum++
				this.getRecordList();// 这个是你自己调用接口的方法
			},
			自己的方法名称() {
				接口地址(给后台的参数,要有分页).then(res => {
				
					
						this.upLoadList = [...this.upLoadList, ...res.rows];
						this.total = res.total
					
				});
			},

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Jmeter之从CSV文件获取数据

新建csv文件 新建一个excel&#xff0c;填充业务数据&#xff0c;然后导出csv格式文件。 添加一个CSV数据文件 使用

苏州科技大学计算机817程序设计(java) 学习笔记

之前备考苏州科技大学计算机&#xff08;专业课&#xff1a;817程序设计&#xff08;java&#xff09;&#xff09;。 学习Java和算法相关内容&#xff0c;现将笔记及资料统一整理归纳移至这里。 部分内容不太完善&#xff0c;欢迎提议。 目录 考情分析 考卷题型 刷题攻略…

Linux中Mysql数据库备份操作

逻辑备份 备份的是建表、建库、插入等操作所执行SQL语句&#xff0c;适用于中小型数据库&#xff0c;效率相对较低。 本质&#xff1a;导出的是SQL语句文件 优点&#xff1a;不论是什么存储引擎&#xff0c;都可以用mysqldump备成SQL语句 缺点&#xff1a;速度较慢&#xff0c;…

人工智能_机器学习078_聚类算法_概念介绍_聚类升维_降维_各类聚类算法_有监督机器学习_无监督机器学习---人工智能工作笔记0118

首先看一下什么是聚类,我们可以进入sklearn的官网去看看 可以看到这里,首先classification 这个分类我们学完了,然后就是regression回归我们也学完了对吧,其实我们现实生活中的,大部分问题就是 这两种问题就可以解决了. 然后我们再来看一个: clustering,这个就是聚类对吧.聚类算…

万界星空科技生产管理MES系统中的工时管理

工时管理的重大意义 1.提高生产效率 通过工时管理&#xff0c;企业可以更加精确地掌握研发人员的工时情况&#xff0c;及时调整项目进度和人力安排&#xff0c;提高生产效率。 2.降低人力成本 通过工时管理&#xff0c;企业可以更加精确地核算研发人员的工时费用&#xff0c…

KEPServerEX 6 之【外篇-1】PTC-ThingWorx服务端软件安装 Tomcat10本地安装

本文目标: 安装 Java 和 Apache Tomcat ,为ThingWorx安装做基础。 ----------------------------------------------------------------------- 安装重点 --------------------------------------------------------------------- 1. 安装 Java 11 / JDK 11 添加系…

Seem环境安装

创建虚拟环境 conda create -n seem python3.8 conda activate seem 安装相关依赖&#xff1a;&#xff08;不按照的话会报错&#xff09; sudo apt-get install openmpi-bin libopenmpi-devconda install gcc_linux-64pip install mpi4py 导入环境 export PYTHONPATH$(pwd…

在k8s中使用cert-manager部署gitlab集群

写在前面的话&#xff1a;前面有详细的分享过在k8s集群中部署gitlab&#xff0c;不过当时使用gitlab的访问证书是阿里云上免费的ssl证书&#xff0c;今天特意专门介绍下另外一种基于cert-manager发布自签证书的方式实现部署gitlab到k8s集群中。 往期gitlab部署系列如&#xff1…

文献速递:生成对抗网络医学影像中的应用——3DGAUnet:一种带有基于3D U-Net的生成器的3D生成对抗网络

文献速递&#xff1a;生成对抗网络医学影像中的应用——3DGAUnet&#xff1a;一种带有基于3D U-Net的生成器的3D生成对抗网络 给大家分享文献的主题是生成对抗网络&#xff08;Generative adversarial networks, GANs&#xff09;在医学影像中的应用。文献的研究内容包括同模态…

Elasticsearch 查询命令执行时,如何通过词项索引、词项字典、倒排表定位文档逻辑介绍

这里不涉及到源码&#xff0c;只是根据网上的一些文章总结一下&#xff0c;目前不需要细究&#xff0c;只需要知道大概就好&#xff0c;除非你的工作是二次开发ES 一、​Term Index(词项索引)1、FSM&#xff08;Finite State Machine&#xff09;有限状态机2、FSA&#xff08;F…

家政上门服务系统|上门服务系统优化您的生活质量

家政上门服务软件的开发为用户与家政服务供应商之间的互动提供了一个便捷的平台。通过这个软件&#xff0c;用户可以随时随地选择自己所需的服务&#xff0c;比如家庭清洁、保姆、月嫂、老人陪护等。而家政服务供应商则能够接收并响应用户的需求&#xff0c;从而提供一对一的服…

鸿蒙操作系统:从手机到物联网,打造全场景智能体验

随着科技的不断发展&#xff0c;人们对于操作系统的需求也在不断升级。鸿蒙操作系统&#xff0c;作为华为推出的新一代智能终端操作系统&#xff0c;凭借其强大的分布式能力、流畅的用户体验以及丰富的应用生态&#xff0c;正逐渐成为人们关注的焦点。 一、鸿蒙操作系统概述 …

Zookeeper在分布式命名服务中的实践

Java学习面试指南&#xff1a;https://javaxiaobear.cn 命名服务是为系统中的资源提供标识能力。ZooKeeper的命名服务主要是利用ZooKeeper节点的树形分层结构和子节点的顺序维护能力&#xff0c;来为分布式系统中的资源命名。 哪些应用场景需要用到分布式命名服务呢&#xff1…

什么是工厂方法模式,工厂方法模式解决了什么问题?

工厂方法模式是一种创建型设计模式&#xff0c;它定义了一个用于创建对象的接口&#xff0c;但将实际的实例化过程延迟到子类中。这样&#xff0c;客户端代码在不同的子类中实例化具体对象&#xff0c;而不是直接实例化具体类。工厂方法模式允许一个类的实例化延迟到其子类&…

[Angular] 笔记 9:list/detail 页面以及@Output

1. Output input 好比重力&#xff0c;向下传递数据&#xff0c;list 传给 detail&#xff0c;smart 组件传给 dumb 组件&#xff0c;父组件传给子组件。input 顾名思义&#xff0c;输入数据给组件。 output 与之相反&#xff0c;好比火箭&#xff0c;向上传递数据或事件。ou…

5.微服务代码模型

1.微服务代码模型 代码分层 在微服务代码模型里&#xff0c;我们分别定义了用户接口层、并分别为它们建立了interfaces、application、domain和infrastructure四个一级代码目录&#xff1b; interfaces(用户接口层): 它主要存放用户接口层与前端应用交互、数据转换和交互相关…

一起玩儿物联网人工智能小车(ESP32)——16. 用ESP32的GPIO控制智能小车运动起来(MicroPython)

摘要&#xff1a;本文介绍用MicroPython实现ESP32的GPIO控制智能小车朝各个方向运动 前边的Mixly开发之后&#xff0c;对应生成的代码是C语言的。可能很多人都觉得C语言很难学&#xff0c;现在学Python的人很多&#xff0c;觉得学起来更容易一些。其实&#xff0c;语言本身的难…

探索前端开发趋势:2023年的新兴技术与发展方向

随着科技的不断发展&#xff0c;前端开发领域也在不断演进。本文将详细介绍2023年前端开发的新兴技术和发展趋势&#xff0c;为开发者们指明前端技术的发展方向和面临的挑战。从WebAssembly、PWA到低代码开发&#xff0c;激动人心的全新前景等你探索。 随着科技的快速发展&…

计算机图形图像技术复习资料

一、考试题型 1、简述题&#xff08;10分4题&#xff0c;共40分&#xff09; 2、计算题&#xff08;共10分&#xff09; 3、编程题&#xff08;共30分&#xff09; 4、问答题&#xff08;共20分&#xff09; 二、复习提纲 1、简答题 &#xff08;1&#xff09;第1章的基本…

平面灯阵中寻找最大正方形边界 - 华为机试真题题解

分值: 300分 题解: Java / Python / C++ 题目描述 现在有一个二维数组来模拟一个平面灯阵,平面灯阵中每个位置灯处于点亮或熄灭,分别对应数组每个元素取值只能为1或0,现在需要找一个正方形边界,其每条边上的灯都是点亮(对应数组中元素的值为1)的,且该正方形面积最大。 …
最新文章