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;
}
}
}
}
})
你要去做一个大人,不要回头,不要难过。
“只希望在故事的最后,我还是我,你也还是你。”