在uni-app中使用uview分页查询，加载更多

在项目中经常出现一些列表，需要我们分页查询数据，手机滑动到底部才加载更多的数据。在uni-app项目中使用uview2.0的ui框架，我们可以按照以下的方式分页查询，加载更多
uni-app官网：https://uniapp.dcloud.net.cn/
uview2.20官网：https://www.uviewui.com/components/intro.html

<template>
	<view class="container">
		<view class="list">
			<!-- 循环遍历从后台获取到的数据 -->
			<view class="item" v-for="(item,index) in list"></view>
			<!-- 没有数据并且没有更多的时候显示为空状态 -->
			<u-empty v-if="!(list.length) && status =='nomore'" mode="list" height="280" marginTop="50"></u-empty>
			<!-- 加载更多 -->
			<u-loadmore :status="status" v-if="list.length" line icon-color="#028BF7" marginTop="20"/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNo:1,//当前页数
				pageSize:10,//页数大小
				totalPage:"",//总页数
				list:[],//列表数据
				status: 'loadmore',//状态
			}
		},
		onLoad() {
			this.getList();//获取列表数据
		},
		onReachBottom() {
			// 如果当前页数大于等于总页数，状态修改为没有更多了，不再继续往下执行代码
			if(this.pageNo >= this.totalPage) {
				this.status = 'nomore';
				return;
			} ;
			this.status = 'loading';//状态改为加载中
			this.pageNo = ++ this.pageNo;//页面新增一页
			this.getList();//修改页数后，重新获取数据
		},
		methods: {
			// 获取列表数据
			getList(){
				this.$api.getList(this.pageNo,this.pageSize,res=>{
					let data = res.data;
					this.list.push(...data.list);//在列表后面新增新获取的数据
					this.totalPage = data.total;//获取数据总页数
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	// @import 'list.scss';  /* 引入当前页面样式表 */
</style>