uni-app 滚动到底部加载更多数据

为页面底部添加正在加载动画,可以使用组件 uLi-load-more,直接点击 使用HBuilder 导入插件,可以不用引入和注册该组件,但 HBuilderX版本应高于2.5.5

// 加载动画组件添加在页面底部即可
<uLi-load-more status="loading"></uLi-load-more>

data(){
    
    
	return{
    
    
		page:1, // 第一页 
		allpage:0, // 总页数
		status:"loading" // 加载状态
	}
}

使用uni-app 提供的页面生命周期 onReachBottom;可以监听到页面是否滚动到底部,

onReachBottom(){
    
    
	// 判断是否有数据
	if(this.page>=this.allpage){
    
    
		this.status="noMore"
		return ;
	}else{
    
    
		this.status="loading"
	}
	this.page++
	this.getData(); // 获取数据
	console.log('我滚动到底部了')
}

猜你喜欢

转载自blog.csdn.net/weixin_44640323/article/details/112949745
今日推荐