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.hqwc.cn/news/323864.html

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

相关文章

篮球羽毛球乒乓球体育场馆预订小程序开发

开发一款专业的小程序&#xff0c;用于多场馆场地的预定和管理&#xff0c;包括体育馆、羽毛球馆、兵乒球馆、篮球馆等各类场馆。此小程序旨在为场馆提供全方位的运营解决方案&#xff0c;并满足会员的不同需求。 该小程序的核心功能特性包括&#xff1a; 场馆管理&#xff…

小心JDK20 ZipOutputStream

Oracle 團隊竟然這麽粗心&#xff0c;編譯JDK 20 時ZipOutputStream沒有編譯成功就發佈了。 所以這個20版本不可以使用ZipOutputStream。 GZIPInputStream 只能做最後的壓縮&#xff0c;不能添加多個附件ZipEntry。 下一個版本21不存在這個問題。 try(var zipOut new ZipOu…

SSM在线手机品牌商城----计算机毕业设计

项目介绍 该项目为前后台项目&#xff0c;分为普通用户与管理员两种角色&#xff0c;前台普通用户登录&#xff0c;后台管理员登录&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,用户管理,品牌管理,子品牌管理,商品管理,订单管理,留言板管理等功能。 用户角…

智能分析网关V4太阳能风光互补远程视频智能监控方案

一、背景需求 在一些偏远地区&#xff0c;也具有视频监控的需求。但是这类场景中&#xff0c;一般无法就近获取市电&#xff0c;如果要长距离拉取市电&#xff0c;建设的成本非常高且长距离传输有安全隐患&#xff0c;因此风光互补远程视频监控方案的需求也较多。利用风光电转化…

Python实现PowerPoint(PPT/PPTX)到PDF的批量转换

演示文稿是一种常见传达信息、展示观点和分享内容的形式&#xff0c;特别是PowerPoint演示文稿&#xff0c;广泛应用于各行各业&#xff0c;几乎是演讲等场合的必备工具。然而&#xff0c;演示文稿也有其限制&#xff0c;对设备的要求较高&#xff0c;且使用不同的软件或设备演…

Open AI 将于下周开放 GPTs 商店,海量AI工具将会改善工作生活

为了确保 GPTs 的上架合规性和质量&#xff0c;OpenAI明确了以下三个条件&#xff1a; 合规使用政策和品牌指南&#xff1a; 在提交 GPTs 上架申请之前&#xff0c;请仔细查阅 OpenAI 的使用政策和 GPT 品牌指南。确保你的应用符合相关规定&#xff0c;遵循 OpenAI 的使用准则…

安全加固之weblogic屏蔽T3协议

一、前言 开放weblogic控制台的7001端口&#xff0c;默认会开启T3协议服务&#xff0c;T3协议则会触发的Weblogic Server WLS Core Components中存在反序列化漏洞&#xff0c;攻击者可以发送构造的恶意T3协议数据&#xff0c;获取目标服务器权限。 本文介绍通过控制T3协议的访问…

【深入浅出RocketMQ原理及实战】「云原生升级系列」打造新一代云原生“消息、事件、流“统一消息引擎的融合处理平台

打造新一代云原生"消息、事件、流"统一消息引擎的融合处理平台 云原生架构RocketMQ的云原生架构实现RocketMQ的云原生发展历程互联网时期的诞生无法支持云原生的能力 云原生阶段的升级云原生升级方向促进了Mesh以及多语言化发展可分合化的存算分离架构存储分离架构的…

[HNCTF 2022 Week1]easy_html

[HNCTF 2022 Week1]easy_html wp 进入题目&#xff0c;页面内容&#xff1a; 饼干就是指 cookie &#xff0c;cookie 的中文是饼干。 抓包看看&#xff1a; cookie 中提示当前目录下有一个 f14g.php 文件。%2F 是 / 的 URL 编码。 访问 f14g.php 文件&#xff1a; 是一个输入…

Qt界面篇:Qt停靠控件QDockWidget、树控件QTreeWidget及属性控件QtTreePropertyBrowser的使用

1、功能介绍 本篇主要使用Qt停靠控件QDockWidget、树控件QTreeWidget及Qt属性控件QtTreePropertyBrowser来搭建一个简单实用的主界面布局。效果如下所示。 2、控件使用详解 2.1 停靠控件QDockWidget QDockWidget可以停靠在 QMainWindow 内或作为桌面上的顶级窗口浮动。默认值…

物理与网络安全

物流环境安全 场地选择考虑抗震、承重、防火、防水、供电、空气调节、电磁防护、雷击及静电 场地因素&#xff1a; 自然灾害&#xff0c;社会因素&#xff08;加油站、化工厂&#xff09;&#xff0c;配套条件&#xff08;消防&#xff0c;交通&#xff0c;电力&#xff0c;…

智能分析网关V4在工业园区周界防范场景中的应用

一、背景需求分析 在工业产业园、化工园或生产制造园区中&#xff0c;周界防范意义重大&#xff0c;对园区的安全起到重要的作用。常规的安防方式是采用人员巡查&#xff0c;人力投入成本大而且效率低。周界一旦被破坏或入侵&#xff0c;会影响园区人员和资产安全&#xff0c;对…