uni-app scroll-view 实现上拉加载更多数据

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

// lower-threshold 距离底部 30 触发事件
<scroll-view class="orderlist" scroll-y="true" lower-threshold="30" @scrolltolower="scrollLower">
	<view class="" style="height: 70rpx;">元素</view>
	// 加载动画组件
	<uLi-load-more status="loading"></uLi-load-more>
</scroll-view>

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

方法

scrollLower(){
    
    
		if(this.page>=this.allpage){
    
    
			this.status="noMore"
			return ;
		}else{
    
    
			this.status="loading"
		}
		this.page++
		this.getData();
		console.log('我滚动到底部了')
}

滚动高度

<style>
	.orderlist{
    
    
		position: absolute;
		bottom: 0;top:70rpx;
		width: 100%;
	}
</style>