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.mzph.cn/news/600485.shtml

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

相关文章

Grafana相关问题及答案(2024)

1、Grafana 是什么&#xff0c;它用于什么目的&#xff1f; Grafana 是一个高度灵活且富有功能的数据可视化和监控平台&#xff0c;旨在为技术专业人员提供强大的方式来显示和分析他们的数据。下面将详细介绍 Grafana 的关键特点和它的使用场景。 关键特点 1. 数据源的多样性…

【数据库系统概论】数据库并发控制机制——并发操作带来的数据不一致性问题有哪些

系统文章目录 数据库的四个基本概念&#xff1a;数据、数据库、数据库管理系统和数据库系统 数据库系统的三级模式和二级映射 数据库系统外部的体系结构 数据模型 关系数据库中的关系操作 SQL是什么&#xff1f;它有什么特点&#xff1f; 数据定义之基本表的定义/创建、修改和…

算法基础之合并果子

合并果子 核心思想&#xff1a; 贪心 Huffman树(算法): 每次将两个最小的堆合并 然后不断向上合并 #include<iostream>#include<algorithm>#include<queue> //用小根堆实现找最小堆using namespace std;int main(){int n;cin>>n;priority_queue&l…

项目-苍穹外卖基础(持续更新中~)

day1: login的后端实现&#xff1a; day 2:

【java】期末复习知识点

简单不先于复杂&#xff0c;而是在复杂之后。 文章目录 填空题封装包主类开发过程的改变interfaceabstract class访问控制关键字继承多态object 类Java I/O(输入/输出)异常线程和进程创建线程的两种基本方法 编程题Hello World编写Swing程序&#xff0c;显示一个空白窗口 填空题…

【大数据进阶第三阶段之Hive学习笔记】Hive的数据类型与数据操作

【大数据进阶第三阶段之Hive学习笔记】Hive安装-CSDN博客 【大数据进阶第三阶段之Hive学习笔记】Hive常用命令和属性配置-CSDN博客 【大数据进阶第三阶段之Hive学习笔记】Hive基础入门-CSDN博客 【大数据进阶第三阶段之Hive学习笔记】Hive查询、函数、性能优化-CSDN博客 …

奇偶数合并

今天分享一道很有意思的算法题目 1、题目描述 奇偶数合并 将所有相邻且相同的偶数相加放入相邻偶数中间 将所有相邻且相同奇数相加&#xff0c;替换掉这两个相邻且相同的奇数 最后输出合并后的数组结果。 举例 数组[1,2,2,7,8,3,3,6] 数组奇偶数合并之后[1,2,4,2,7,8,6,1…

互联网大厂面试题目

阿里篇 1.1.1 如何实现一个高效的单向链表逆序输出&#xff1f; 1.1.2 已知sqrt(2)约等于1.414&#xff0c;要求不用数学库&#xff0c;求sqrt(2)精确到小数点后10位 1.1.3 给定一个二叉搜索树(BST)&#xff0c;找到树中第 K 小的节点 1.1.4 LRU缓存机制 1.1.5 关于epoll和…

依次判断数组a中的每个字符串长度 是否小于等于数组b中对应字符串长度 numpy.char.less_equal(a,b)

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 依次判断数组a中的每个字符串长度 是否小于等于数组b中对应字符串长度 numpy.char.less_equal(a,b) [太阳]选择题 请问以下代码最终输出结果是&#xff1f; import numpy as np a np.array…

初探ElasticSearch

1.什么是ElasticSearch&#xff1f; ElasticSearch简称ES&#xff0c;也成为弹性搜索&#xff0c;是基于Apache Lucene构建的开源搜索引擎。其实Lucene本身就是一款性能很好的开源搜索引擎工具包&#xff0c;但是Lucene的API相对复杂&#xff0c;而且掌握它需要很深厚的“内功…

通过使用别名让 SQL 更简短-数据库教程shulanxt.com-帆软软件有限公司

MySQL视频教程导航 https://www.shulanxt.com/database/mysqlvideo/p1 SQL 别名 SQL 别名 通过使用 SQL&#xff0c;可以为表名称或列名称指定别名。 基本上&#xff0c;创建别名是为了让列名称的可读性更强。 列的 SQL 别名语法 SELECT column_name AS alias_name FROM …

Linux操作实例 – 输入输出重定向

Linux操作实例 – 输入输出重定向 Input & Output Redirection Examples in Linux By Jackson 1. 前言 在操作计算机的时候&#xff0c;我们能够很容易通过键盘、鼠标给计算机输入信息&#xff08;例如&#xff1a;写公文、邮件&#xff0c;同时通过显示器得到输出。这就…

DevOps(4)

目录 16.Ctrl Alt Del组合键是否适用于Linux&#xff1f; 17.如何引用连接打印机等设备的并行端口&#xff1f; 18.硬盘驱动器和软盘驱动器等驱动器是否用驱动器号表示&#xff1f; 19.如何在Linux下更改权限&#xff1f; 20.在Linux中&#xff0c;为不同的串口分配了哪些…

在 CentOS 7.8 上安装 Node.js

1.安装 NVM&#xff08;Node Version Manager&#xff09;&#xff1a; curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash这将从 NVM 的 GitHub 仓库下载安装脚本并执行。请注意&#xff0c;您需要重新启动终端或者执行 source ~/.bashrc 以…

用 CSS 实现一个三角形、用 CSS 实现一个自适应的正方形、CSS写一个简单的幻灯片页面效果

用 CSS 实现一个三角形 效果&#xff1a; 参考代码&#xff1a; <!DOCTYPE html> <html> <head><style>.triangle {width: 0;height: 0;border: 100px solid red;border-top-color: transparent;border-left-color: transparent;border-right-colo…

K8S学习指南(63)-K8S源代码走读之Kube-Proxy

文章目录 前言Kube-Proxy 的代码结构Kube-Proxy 的核心逻辑1. 负载均衡1.1 负载均衡算法1.2 负载均衡策略 2. iptables 规则配置2.1 iptables 规则生成2.2 iptables 规则生效 3. IPVS 规则配置3.1 IPVS 规则生成3.2 IPVS 规则生效 4. 服务代理4.1 服务代理注册4.2 服务代理处理…

2024年MySQL学习指南(四),探索MySQL数据库,掌握未来数据管理趋势

文章目录 前言9. 约束的概念10. 约束的分类11. 非空约束12. 唯一约束13. 主键约束14. 默认约束15. 外键约束16. 约束的案例练习 前言 接上篇&#xff1a; 2024年MySQL学习指南&#xff08;一&#xff09; 2024年MySQL学习指南&#xff08;二&#xff09; 2024年MySQL学习指…

220.【2023年华为OD机试真题(C卷)】考勤信息(滑动窗口算法-JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-考勤信息二.解题思路三.题解代码Python题解代码…

数据采集有哪些方法?HTTP代理起到什么作用?

在这个数字化的时代&#xff0c;数据就如同生活中不可或缺的元素&#xff0c;我们的行为、喜好、甚至是想法都被转化成了数字化的信息。那么&#xff0c;现代社会是如何进行数据的采集的呢&#xff1f;让我们一同来看看&#xff01; 1. 网络浏览行为的追踪 在我们浏览互联网的…

kafka重平衡经验总结

文章目录 概要背景解决方法技术细节小结 概要 关于kafka重平衡问题在实践工作的应用 背景 重平衡包括以下几种场景: 消费者组内成员发生变更&#xff0c;这个变更包括了增加和减少消费者。注意这里的减少有很大的可能是被动的&#xff0c;就是某个消费者崩溃退出了主题的分…