uni-app实现上拉加载&下拉刷新

下拉刷新&上拉加载效果图

下拉刷新:
备注:会把网络上的最新数据刷新出来;

上拉加载

备注:打开一个小程序会有很多条数据,我们不可能一次性把所有的数据全部加载出来,需要我们进行上拉加载更多数据…
比如:第一次打开8条数据，但是8条数据不够我们使用，我们就需要进行上拉在加载8条数据,这样以此类推;需要多少,我们就加载多少条，这样就加快了打开界面的速度…

实现的代码

"enablePullDownRefresh":true	

主要代码,全部都有注释

<script>
	 var _this;
	 var page=1;
	 var timer=null;
	export default {
		data() {
			return {
				pages:[],
				loading:"加载更多"
			}
		},
		
		onLoad:function(){		//页面第一次加载是会触发，可以把一些不需要实时更新的数据放入
			_this=this;
			this.getNews();
		},
		onPullDownRefresh:function(){	//监听用户下拉刷新的功能
			this.getNews();			//刷新之后给触发getNews()函数;
		},
		onReachBottom:function(){				//当划到最底部的时候触发事件
			/* console.log("我是最底部了"); */
			this.getMoreNews();				//到底之后会触发getMoreNews()函数;
			if(timer!=null){		//加载缓冲延迟
			   clearTimeout(timer);
		   }
		   timer=setTimeout(function(){
			   _this.getMoreNews();
		   },600);
		},
		methods:{
			
			getMoreNews:function(){						//数据到底,触发这个函数
				_this.loading="加载中...";
				uni.showNavigationBarLoading();		//一读取数据,就进行刷新
				uni.request({
					url: this.$host+'/tb/school/list',
					method: 'POST',
					data: {
						page:page,
						limit:10,
					},
					header:{'content-type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideNavigationBarLoading();
						/* console.log(res.data.page.records.length); */
						if(res.data.page.records.length==0){
							_this.loading="加载完成";
							return false;
						}
						var pages=res.data.page.records;
						_this.pages=_this.pages.concat(pages);  //进行数据的累加
						uni.stopPullDownRefresh();	//数据加载完成,刷新结束
						page++;		//页数的++
						_this.loading="加载更多";
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getNews:function(){
				page=1;
				uni.showNavigationBarLoading();		//一读取数据,就进行刷新
				uni.request({
					url: this.$host+'/tb/school/list',
					method: 'POST',
					data: {
						page:page,
						limit:12,
					},
					header:{'content-type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res.data.page.records);
						var pages=res.data.page.records;	//产生的数据赋给pages变量
						_this.pages=pages;	//把产生的pages变量,放到oages数组里面;  ps:_this=this;
						uni.stopPullDownRefresh();	//数据加载完成,刷新结束
						uni.hideNavigationBarLoading();	//数据读取完毕,刷新停止
						page++;  //页数的++
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>