Vue.js 实现简单的上拉加载更多（不使用插件）【开发记录】

1、在开发的过程中，无论是什么项目，都会或多或少的接触到列表页数据较多的时候，当列表页数据较多的时候就要用到分页处理，可以一次性将数据全部加载都页面然后页面做分页处理，但是这种页面加载缓慢，页面比较沉重，通常情况下是在后台做分页处理，然后前端需要加载的时候每次获取一页就可以了，前阶段正好遇到这个需求，借此记录一下。

2、实现思路：在Vue.js的钩子函数created中声明一个scroll事件监听，监听屏幕的高度变化，一旦滑动到达屏幕底部就去后台请求新的数据，同时我们在data中声明一个pagenum字段来记录当前加载到多少页，每去后台请求一次我们将pagenum+1，以防重复加载数据，加载过后，将新的数据concat到data中储存数据的数组中，大致的思路就是这样。

3、代码：（不相关的数据我这里直接删除了，你们自己加上你们自己的数据直接跑起来就可以用）

说明：下面我是每页加载十条数据（pagesize=10），在created()中添加scroll事件监听，在mounted中首先加载第一页的数据（pageno=1），totalnum记录后台数据的总页数，当当前加载页数<总页数的时候启动加载，一旦加载全部，即使滑动到屏幕底部也不执行后台加载数据，sites[]数组用来存储我们从后台请求过来的数据，具体看代码，如果有疑问，留言或私信。

var vm=new Vue({
	el: "#",
	data(){
		return{
			pageno: 1,
			pagesize: 10,
			totalnum: 1,
			scroll : true,
			sites: []
		}
	},
	created() {
		this.getSpecialData()
	},
	mounted:function(){
		window.addEventListener('scroll',this.handleScroll);
	},
	methods:{
		getSpecialData:function () {
			jQuery.ajax({
				url: "",
				data: {
					pageno: this.pageno,
					pagesize: this.pagesize
				},
				type: 'get',
				dataType:"json",
				success: function (res){
					console.log(res);
					if(res.code=="0"){
						vm.pageno += 1;
						vm.totalnum = res.data.totalpages;
						if(res.data.items.length!=0){
							for(var i=0;i<res.data.items.length;i++){
								vm.sites = vm.sites.concat(res.data.items[i]);
								console.log(res.data.items[i]);
							}
						}
						//这里是我自己做的一个提示效果，可以删除
						$("#address_manager_alert").hide();	
					}else{
						$("#address_manager_alert").hide();
						alert(res.message);
					}
			   }
			})
		},
		handleScroll:function(){	//下面这部分兼容手机端和PC端
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var windowHeitht = document.documentElement.clientHeight || document.body.clientHeight;
			var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
			//是否滚动到底部的判断
			if(scrollTop + windowHeitht == scrollHeight){
				if(this.pageno <= this.totalnum){
					$("#address_manager_alert").show();
					this.getSpecialData();
				}else{
					return;
				}
			}
		}
	}
})

你要去做一个大人，不要回头，不要难过。

“只希望在故事的最后，我还是我，你也还是你。”