uniapp小程序上拉加载

引入组件

var _self, page = 1//定义初始页数;
import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue'; //引入loadMore组件

export default {
	components: { uniLoadMore },
			data() {
		return {
		    list:[]  //定义数组来接受数据
			status: 'more'  //上拉状态
		};
	}

template中使用组件

<template>
       <uni-load-more :status="status"></uni-load-more>
</template>
	

onload

onLoad: function() {
		_self = this;
		this.getlist()   //onload方法调用getlist，初始显示的数据
	},

onReachBottom

onReachBottom: function() {
		console.log('触发上拉加载');
		this.getmoregylist();
	},

methods

getlist() {
			uni.request({
				url: '地址',
				method: 'GET',
				data: {
					page: page, //这里页数是初始定义的1
					limit: 10  //参数，每页显示的数据条数
				},
				success: res => {
					this.list = res.data; //赋值
				}
			});
		}


getmorelist() {
			if (_self.status !== 'more') {
				//如果上拉状态不是 显示更多 返回false
				return false;
			}
			_self.status = 'loading'; //否则有数据 显示加载中
			uni.showNavigationBarLoading(); //显示加载动画
				uni.request({
					url: '地址',
					method: 'GET',
					data: {
						page: page+1, //页数+1 否则初始数据会渲染两次
						limit: 10
					},
					success: res => {
						page++; //每加载一次 页数+1
						_self.list = _self.list.concat(res.data); //将数据拼接在一起
						_self.status = 'more';//将status重置
						uni.hideNavigationBarLoading(); //关闭加载动画
						if (res.data == '') {
							//没有数据
							_self.status = 'noMore'; //没有数据则显示没有更多
							uni.hideNavigationBarLoading(); //关闭加载动画
							return;
						}
					}
				});
		}