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

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

2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中...共计23条视频，包括：第1讲 uni-app简介、第2讲 uni-app环境搭建、第3讲 uni-app之HelloWorld实现等，UP主更多精彩视频，请关注UP账号。https://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 pageResult = newsService.page(new Page<>(pageBean.getPageNum(), pageBean.getPageSize()));
    Map 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 插件市场

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
				})
			}
		}
	}