uni-app 前后端调用实例 基于Springboot 上拉分页实现

锋哥原创的uni-app视频教程:

2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中...共计23条视频,包括:第1讲 uni-app简介、第2讲 uni-app环境搭建、第3讲 uni-app之HelloWorld实现等,UP主更多精彩视频,请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1eG411N71c/基于前面帖子搭建下前后端实例:uni-app 前后端调用实例 基于Springboot-CSDN博客

后端:

/**
 * 分页查询新闻信息
 * @param pageBean
 * @return
 */
@PostMapping("/list")
public R list(@RequestBody PageBean pageBean) throws InterruptedException {
    Thread.sleep(1000);
    Page<News> pageResult = newsService.page(new Page<>(pageBean.getPageNum(), pageBean.getPageSize()));
    Map<String,Object> resultMap=new HashMap<>();
    resultMap.put("newsList",pageResult.getRecords());
    resultMap.put("total",pageResult.getTotal());
    resultMap.put("totalPage",pageResult.getPages());
    return R.ok(resultMap);
}

前端加下参数:

queryParams:{
					pageNum:1,
					pageSize:10
				},
				totalPage:0,

uni-load-more 组件

uni-load-more 加载更多 - DCloud 插件市场

<uni-load-more :status="status" :icon-size="16" :content-text="contentText"></uni-load-more>
export default{
		data(){
			return{
				queryParams:{
					pageNum:1,
					pageSize:10
				},
				totalPage:0,
				listData:[
				],
				status:'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad(){
			this.getList();
		},
		onReachBottom(){
			console.log("下拉触底")
			if(this.queryParams.pageNum>=this.totalPage){
				console.log("没有下一页数据")
				// uni.showToast({
				// 	title: '没有下一页数据了'
				// });
				this.status="no-more";
			}else{
				console.log("有下一页数据")
				this.queryParams.pageNum++;
				this.getList();
			}
		},
		onPullDownRefresh(){
			console.log("下拉刷新");
			this.listData=[];
			this.queryParams.pageNum=1;
			this.getList();
		},
		methods:{
			getList(){
				this.status='loading';
				uni.request({
					url:'http://localhost/news/list',
					data:this.queryParams,
					method:'POST',
					success:data=>{
						uni.stopPullDownRefresh();
						let result=data.data;
						if(result.code==200){
							this.listData=[...this.listData,...result.newsList]
							this.totalPage=result.totalPage;
						}
					},
					fail:(data,code)=>{
						console.log("fail:" + JSON.stringify(data))
					}
				})
			},
			goDetail:function(e){
				uni.navigateTo({
					url:'/pages/detail/detail?id='+e.id
				})
			}
		}
	}

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

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

相关文章

java spring mvc 初探 web搭建过程详解

提前准备安装tomcat 设备:mac 第一步:下载 进入官网下载压缩包 注意:如果jdk版本是1.8,则tomcat需要v8才行,否则会报错 https://tomcat.apache.org/ 第二步:解压 解压后路径 /Users/you/Library/tomcat/apache-tomcat-8.5.73 进入此目录 修改配置 code setclasspath.…

Java SE面试

1.什么是 Java&#xff1f; Java 是一门面向对象的编程语言&#xff0c;不仅吸收了 C语言的各种优点&#xff0c;还摒弃了 C里难以理解的多继承、指针等概念&#xff0c;因此 Java 语言具有功能强大和简单易用两个特征。Java 语言作为静态面向对象编程语言的优秀代表&#xff…

C+语言的新特性

总是期待学习别人做好了的东西&#xff0c;是否也是一种懒惰呢&#xff1f; C语言是一门想象中的语言&#xff0c;它介于C和C之间。新的研究表明&#xff0c;C语言不支持某些特性&#xff0c;而C过于复杂。于是&#xff0c;便有了C语言&#xff0c;它的新特性如下&#xff1a; …

【已解决】js定义对象属性是.如何访问

当变量没有length属性的时候&#xff0c;可能是个对象变量&#xff0c;当有键值对的时候就可能是个对象&#xff0c;读者都知道的是&#xff0c;用typeof(变量)可以查看属性&#xff0c;今天本文解决的问题是如果js定义对象中属性是"点"如何访问 问题再现 var a {…

【Linux软件包管理器】yum详解

目录 1、什么是软件包 2、yum的操作 1&#xff09;yum源 2&#xff09;三板斧 ① yum list ② yum install [软键名] ③ yum remove [软件名] 1、什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了,…

Dubbo入门介绍和实战

1. 引言 Dubbo是一款开源的高性能、轻量级的Java RPC&#xff08;远程过程调用&#xff09;框架&#xff0c;旨在解决分布式服务之间的通信问题。本文将介绍Dubbo的基础概念、核心特性以及使用场景&#xff0c;包括实际示例演示。 2. 什么是Dubbo&#xff1f; Dubbo是阿里巴…

Spring Boot依赖版本声明

链接 官网 Spring Boot文档官网&#xff1a;​​​​​​https://docs.spring.io/spring-boot/docs/https://docs.spring.io/spring-boot/docs/ Spring Boot 2.0.7.RELEASE Spring Boot 2.0.7.RELEASE reference相关&#xff1a;https://docs.spring.io/spring-boot/docs/2.…

实战|验证码突破思路

目录 一、暴力破解突破验证码 二、时间、次数突破验证码 三、回显突破验证码 四、绕过验证码方法介绍 一、暴力破解突破验证码 方法 有的验证码输入正确一次&#xff0c;在一定时间内不用再输入。 有的验证码输入正确一次&#xff0c;会在你session中设定一个值&#xff0…

DFA算法在敏感词过滤的应用

相信大家对于游戏里聊天框的以下内容已经不陌生了 "我***"“你真牛*”“你是不是傻*” 一个垃圾的游戏环境是非常影响玩游戏的心情的&#xff0c;看到这些&#xff0c;就知道游戏已经帮我们屏蔽掉了那些屏蔽字了&#xff0c;对于玩游戏而言&#xff0c;心里会好受很…

Raft no-op日志

no-op日志 为什么 Leader 不能提交之前任期的日志&#xff0c;只能通过提交自己任期的日志&#xff0c;从而间接提交之前任期的日志。 先按错误的情况&#xff0c;也就是 Leader 可以提交之前任期的日志。那么上述的流程&#xff1a; s1 是任期 2 的 Leader(仔细看&#xff0…

【Tomcat】在一台计算机上运行两个Tomcat服务

首先把Tomcat整个文件复制一份放在其他文件夹路径中 1.修改环境变量 添加环境变量在系统变量里面 “CATALINA_HOME” 指向一个路径 “CATALINA_HOME1” 指另一个Tomcat路径 2.修改startup里面的环境变量&#xff0c;全部修改 修改"D:\Java\apache-tomcat-8.5.45\bin&…

Raft Lab3A

Lab3 需要在 Raft 层上实现一个 fault-tolerant key-value service&#xff0c;满足强一致性&#xff0c;也就是线性一致性 (Linearizable Consistency)。线性一致性保证整个系统看起来好像只有一个副本&#xff0c;其中所有的操作都是原子性的。简单地说&#xff0c;线性一致性…

Unity之预制体与变体

PS:不用说了&#xff0c;我在写博客就是在摸鱼 一、预制体 不知道大家小时候有没有看过火影&#xff0c;记得剧情最开始的时候水木哄骗鸣人去偷封印之书&#xff0c;反而让鸣人学会了多重影分身之术&#xff1a; 好了&#xff0c;小编绞尽脑子终于想好怎么向大家介绍预制体了&a…

高级分布式系统-第3讲 网络与网络互联

万维网的诞生 1957年10月4日&#xff0c; 苏联发射了人类第一颗人造卫星—斯普特尼克一号 美国政府震惊不已。 他们认为&#xff0c; 在日趋激烈的冷战对抗中&#xff0c; 自己已经全面落后于苏联。 为了扭转这一局面&#xff0c; 美国国防部很快于1958 年 2 月组建了一个神秘…

红队专题-Web安全/渗透测试-文件上传/下载/包含

文件上传/下载/包含 招募六边形战士队员利用目录穿越反弹SHELL实战测试2.2 提交报文修改检测3.2 文件内容检测绕过完整文件结构 检测 第四章&#xff1a;解析漏洞第一节 常见解析漏洞iis/nginx php fastcgi 取值错误 解析漏洞 &#xff08;配置错误&#xff09;nginx 文件名逻…

2024年,Web3技术的“iPhone时刻”会出现吗?

出品&#xff5c;欧科云链研究院 关于2024年的Web3市场&#xff0c;大多数人目前是持乐观态度的。随着宏观政策稳定&#xff0c;美国和香港地区不断释放加密资产现货ETF的利好&#xff0c;叠加铭文热潮及减半周期临近&#xff0c;市场对Web3及加密资产的兴趣正持续上涨。年后的…

项目从npm迁移到pnpm

场景如下&#xff1a;在安装Vue3时默认为使用Npm安装&#xff0c;如图所示&#xff1a; 安装完后项目就包含了基于NPM的node_modules、package.json&#xff0c;以及package-lock.json 如果想使用pnpm去安装依赖项的话&#xff0c;可以通过如下几个步骤实现&#xff1a; ①删…

UICollection Compositional Layout全详解

本文字数&#xff1a;8325字 预计阅读时间&#xff1a;45分钟 01 Collection View Layout全详解 UICollectionView在iOS中是构建复杂布局的强大工具。iOS13中引入的 UICollectionViewCompositionalLayout为创建自定义布局提供了全新的可能性。本文将深入探讨Compositional Lay…

复试 || 就业day04(2024.01.05)项目一

文章目录 前言线性回归房价预测加载数据数据查看数据拆分数据建模模型的验证、应用模型的评估 总结 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;本文内容来自某机构网课&#xff0c;是我为复试准备的第一个项目 &#…

JAVA中小型医院信息管理系统源码 医院系统源码

开发框架&#xff1a;SpringBootJpathymeleaf 搭建环境&#xff1a;jdk1.8idea/eclipsemaven3mysql5.6 基于SpringBoot的中小型医院信息管理系统&#xff0c;做的比较粗糙&#xff0c;但也实现了部分核心功能。 就诊卡提供了手动和读卡两种方式录入&#xff0c;其中IC读卡器使用…