Vue.js 实现简单的上拉加载更多【不使用插件】

一、在开发的过程当中，不管是什么项目，都会或多或少的接触到列表页数据较多的时候，当列表页数据较多的时候就要用到分页处理，能够一次性将数据所有加载都页面而后页面作分页处理，可是这种页面加载缓慢，页面比较沉重，一般状况下是在后台作分页处理，而后前端须要加载的时候每次获取一页就能够了，前阶段正好遇到这个需求，借此记录一下。

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

三、代码：（不相关的数据我这里直接删除了，大家本身加上大家本身的数据直接跑起来就能够用）

说明：下面我是每页加载十条数据（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;
				}
			}
		}
	}
})

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

“只但愿在故事的最后，我仍是我，你也仍是你。”