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

news2024/11/20 10:28:22

锋哥原创的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.coloradmin.cn/o/1351386.html

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

相关文章

音视频通信

文章目录 一、音视频通信流程二、流媒体协议1、RTSP2、RTMP3、HLS4、WebRTC 一、音视频通信流程 音视频通信完整流程有如下几个环节&#xff1a;采集、编码、前后处理、传输、解码、缓冲、渲染等。 每一个细分环节&#xff0c;还有更细分的技术模块。比如&#xff0c;前后处…

【数据结构】二叉搜索(查找/排序)树

一、二叉搜索树基本概念 1、定义 二叉搜索树&#xff0c;又称为二叉排序树&#xff0c;二叉查找树&#xff0c;它满足如下四点性质&#xff1a; 1&#xff09;空树是二叉搜索树&#xff1b; 2&#xff09;若它的左子树不为空&#xff0c;则左子树上所有结点的值均小于它根结…

使用宝塔在Linux面板搭建网站,并实现公网远程访问

文章目录 前言1. 环境安装2. 安装cpolar内网穿透3. 内网穿透4. 固定http地址5. 配置二级子域名6. 创建一个测试页面 前言 宝塔面板作为简单好用的服务器运维管理面板&#xff0c;它支持Linux/Windows系统&#xff0c;我们可用它来一键配置LAMP/LNMP环境、网站、数据库、FTP等&…

STL map容器与pair类模板(解决扫雷问题)

CSTL之Map容器 - 数据结构教程 - C语言网 (dotcpp.com)https://www.dotcpp.com/course/118CSTL之Pair类模板 - 数据结构教程 - C语言网 (dotcpp.com)https://www.dotcpp.com/course/119 刷到一个扫雷的题目&#xff0c;之前没有玩怎么过扫雷&#xff0c;于是我就去玩了玩…

【计算机设计大赛作品】豆瓣电影数据挖掘可视化—信息可视化赛道获奖项目深入剖析【可视化项目案例-22】

文章目录 一.【计算机设计大赛作品】豆瓣电影数据挖掘可视化—信息可视化赛道获奖项目深入剖析【可视化项目案例-22】1.1 项目主题:豆瓣电影二.代码剖析2.1 项目效果展示2.2 服务端代码剖析2.3 数据分析2.4 数据评分三.寄语四.本案例完整源码下载一.【计算机设计大赛作品】豆瓣…

Go后端开发 -- main函数 变量 常量 函数

Go后端开发 – main函数 & 变量 & 常量 & 函数 文章目录 Go后端开发 -- main函数 & 变量 & 常量 & 函数一、第一个main函数1.创建工程2.main函数解析 二、变量声明1.单变量声明2.多变量声明 三、常量1.常量的定义2.优雅的常量 iota 四、函数1.函数返回…

2024.1.2 安装JDK和Eclipse,并配置java编译环境

2024.1.2 安装JDK和Eclipse&#xff0c;并配置java编译环境 一直对java一知半解&#xff0c;利用春节前一个月时间补补课。 一、安装jdk 首先在oracle官网上下载jdk&#xff0c;这里选jdk17&#xff0c;选择第二项直接安装&#xff0c;第一项是压缩文件&#xff0c;带有一些…

Noisy DQN 跑 CartPole-v1

gym 0.26.1 CartPole-v1 NoisyNet DQN NoisyNet 就是把原来Linear里的w/b 换成 mu sigma * epsilon, 这是一种非常简单的方法&#xff0c;但是可以显著提升DQN的表现。 和之前最原始的DQN相比就是改了两个地方&#xff0c;一个是Linear改成了NoisyLinear,另外一个是在agent在t…

第二十七章 正则表达式

第二十七章 正则表达式 1.正则快速入门2.正则需求问题3.正则底层实现14.正则底层实现25.正则底层实现36.正则转义符7.正则字符匹配8.字符匹配案例19.字符匹配案例211.选择匹配符&#xff08;|&#xff09;12.正则限定符{n}{n,m}&#xff08;1个或者多个&#xff09;*(0个或者多…

创建x11vnc系统进程

为方便使用vnc&#xff0c;所以寻找到一个比较好用的vnc服务端那就是x11vnc&#xff0c;索性就创建了一个系统进程 一、环境 系统&#xff1a;银河麒麟v4-sp2-server 软件&#xff1a;x11vnc【linux下】、VNCviewer【win下】 二、安装x11vnc 1、挂载光盘源并修改apt源 mou…

生态系统服务构建生态安全格局中的实践技术应用

生态安全是指生态系统的健康和完整情况。生态安全的内涵可以归纳为&#xff1a;一&#xff0c;保持生态系统活力和内外部组分、结构的稳定与持续性&#xff1b;二&#xff0c;维持生态系统生态功能的完整性&#xff1b;三&#xff0c;面临外来不利因素时&#xff0c;生态系统具…

Linux用shell脚本执行乘法口诀表的两种方式

#!/bin/bash # *********************************************************# # # # * Author : 藻头男 # # * QQ邮箱 : 2322944912qq.com # …

【SpringBoot3】1.SpringBoot入门的第一个完整小项目(新手保姆版+教会打包)

目录 1 SpringBoot简单介绍1.1 SpringBoot是什么1.2 主要优点1.3 术语1.3.1 starter&#xff08;场景启动器&#xff09; 1.4 官方文档 2 环境说明3 实现代码3.1 新建工程与模块3.2 加入依赖3.3 主程序文件3.4 业务代码3.5 运行测试3.6 部署打包3.7 命令行运行 1 SpringBoot简单…

[足式机器人]Part2 Dr. CAN学习笔记-自动控制原理Ch1-8Lag Compensator滞后补偿器

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-自动控制原理Ch1-8Lag Compensator滞后补偿器 从稳态误差入手&#xff08;steady state Error&#xff09; 误差 Error &#xff1a; E ( s ) R ( s ) − X ( s ) R ( s ) − E ( s ) ⋅ K G …

再见2023,你好2024!

大家好&#xff0c;我是老三&#xff0c;本来今天晚上打算出去转一转&#xff0c;陆家嘴打车实在太艰难了&#xff0c;一公里多的路&#xff0c;司机走了四十分钟&#xff0c;还没到&#xff0c;再加上身体不适&#xff0c;咳嗽地比较厉害&#xff0c;所以还是宅在酒店里&#…

.NET Core SkiaSharp 替代 System.Drawing.Common 的一些用法

在.NET 6中&#xff0c;微软官方建议把 System.Drawing.Common 迁移到 SkiaSharp 库。因为System.Drawing.Common 被设计为 Window 技术的精简包装器&#xff0c;因此其跨平台实现欠佳。 SkiaSharp是一个基于谷歌的Skia图形库&#xff08;Skia.org&#xff09;的用于.NET平台的…

机器学习与深度学习——使用paddle实现随机梯度下降算法SGD对波士顿房价数据进行线性回归和预测

文章目录 机器学习与深度学习——使用paddle实现随机梯度下降算法SGD对波士顿房价数据进行线性回归和预测一、任务二、流程三、完整代码四、代码解析五、效果截图 机器学习与深度学习——使用paddle实现随机梯度下降算法SGD对波士顿房价数据进行线性回归和预测 随机梯度下降&a…

深度学习 Day23——J3DenseNet算法实战与解析

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制&#x1f680; 文章来源&#xff1a;K同学的学习圈子 文章目录 前言1 我的环境2 pytorch实现DenseNet算法2.1 前期准备2.1.1 引入库2.1.2 设…

GitHub Copilot 最佳免费平替:阿里通义灵码

之前分享了不少关于 GitHub Copilot 的文章&#xff0c;不少粉丝都评论让我试试阿里的通义灵码&#xff0c;这让我对通义灵码有了不少的兴趣。 今天&#xff0c;阿七就带大家了解一下阿里的通义灵码&#xff0c;我们按照之前 GitHub Copilot 的顺序分享通义灵码在相同场景下的…

RabbitMQ基础知识

一.什么是RabbitMQ RabbitMQ是一个开源的、高性能的消息队列系统&#xff0c;用于在应用程序之间实现异步通信。它实现了AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;协议&#xff0c;可以在分布式系统中传递和存储消息。 消息队列是一种将消息发送者和接收…