uniapp实现下拉加载更多 u-loadmore

区别于官网教程,这里总结更为白话。

要实现的需求是,比如起初有十条数据,下拉至底部,追加某数量的数据。

比如我的项目中,我把它放在了数据展示的底部,上代码:


			
			

此处强调的是u-loadmore。

通过status设置组件的状态,加载前值为loadmore,加载中为loading,没有数据为nomore

加载前,显示"加载更多",加入点击可选,是因为数据不够一页时,无法触发页面的onReachBottom生命周期加载中,显示"正在加载...",2种动画可选加载后,如果还有数据,回到"加载前"状态,否则加载结束,显示"没有更多了"

核心功能是onReachBottom函数:注意不在methods里面

onReachBottom() {
				if(this.currentPage >= this.pages) return ;
				this.status = 'loading';
				this.currentPage = ++ this.currentPage;
				setTimeout(() => {
					this.getTongji()
					if(this.currentPage >= this.pages) this.status = 'nomore';
					else this.status = 'loading';
				}, 1000)
			},

这里的currentPage是当前的页码,pages是总页数,

方法生效时,当前页码自增加一,调用查询数据的方法:

	getTongji:function(){
				this.$u.api.getTongji({"material":this.searchForm,"currentPage":this.currentPage,"pageSize":this.pageSize}).then(res=>{
					if(res.code==200){
					res.data.records.forEach(e=>{
						this.tableData.push(e)
					})
					this.pages=res.data.pages
					this.currentPage=res.data.current
					this.totalCount=res.data.total
					}else if(res.code==401){
						uni.navigateTo({
							url:"../login/login"
						})
						
					}else{
							uni.showToast({
								title:"加载错误",
								icon:"none",
							})
						}
				})
			},

注意成功之后的数据应该push进数组中,而不是直接等于,否则就是下拉换页的效果了。

你可能感兴趣的:(vue)