锋哥原创的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<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})}}}