uniapp实现下拉加载更多

之前的一个项目当时由于数据体量比较小为了图方便直接加载请求的全部数据，因为现在数据体量变大导致加载速度比较缓慢

所以决定采用下拉形式的无感加载方式 例如：刚开始每页只加载10条 每下拉到底部再追加10条
实现方式：
使用了uview的加载组件

<u-loadmore :line="true" :status="status"></u-loadmore>

status：用来设置组件的状态。加载前：loadmore，加载中：loading，没有数据：nomore

核心的功能是onReachBottom 页面上拉触底事件的处理函数，在页面滚动到最底端的时候触发该方法的回调

data() {
	return {
		list: [],//数据列表
		status: 'nomore',//加载状态
		page: 1,//当前页
		total_page: 0,//总页数
	}
},
onReachBottom() {
	if(this.page >= this.total_page) return ;
	this.status = 'loading';
	this.page = ++ this.page;
	this.getList()
	setTimeout(() => {
		if(this.page >= this.total_page) this.status = 'nomore';
		else this.status = 'loading';
	}, 1000)//这里延迟是为了防止状态已完成但数据还未加载出来的问题，当然也可以直接放在then回调里一劳永逸
},
methods: {
	getList() {
		getMoneyBillList({
			page: this.page
		}).then(res => {
			this.list = [...this.list,...res.data.list];//追加数据
			this.total_page = res.data.total_page
		})
	},
}