实现pc端的滚动加载功能
首先要想滚动加载要知道滚动条距离底部的距离，这里我定义3个方法
//滚动条在Y轴上的滚动距离
getScrollTop() {
var scrollTop = 0,
bodyScrollTop = 0,
documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop =
bodyScrollTop - documentScrollTop > 0 ?
bodyScrollTop :
documentScrollTop;
return scrollTop;
},
//文档的总高度
getScrollHeight() {
var scrollHeight = 0,
bodyScrollHeight = 0,
documentScrollHeight = 0;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight =
bodyScrollHeight - documentScrollHeight > 0 ?
bodyScrollHeight :
documentScrollHeight;
return scrollHeight;
},
//浏览器视口的高度
getWindowHeight() {
var windowHeight = 0;
if (document.compatMode == "CSS1Compat") {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
},
然后定义一个menu方法，就是滚动的时候，去加载的方法
menu() {
if(this.isKaiGuan){
let scroll =
this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
if (scroll > -100) {
this.sizePage++;
this.getActivityList(this.activeName);
}
}
},
这里要提一点，需要定义开关isKaiGuan，不然，滚动的时候，ajax异步加载，会一次性加载好多次
请求前定义false，请求回调后定义true，其实为了优化效果，可以这样写
if(res.data.data.length!=24){
this.isKaiGuan = false;
}else{
this.isKaiGuan = true;
}
判断是否长度是24，这里的24是我的一次加载的次数，这样可以保证下次如果数据不到24，就没必要在去加载了，相当于少加载一次。
然后只需要在mounted里添加
window.addEventListener('scroll', this.menu);
由于滚动加载会影响其他页面，保证其他页面滚动的时候，限制掉
添加判断
if (this.$route.name == "createActivites") {
window.addEventListener('scroll', this.menu);
}else{
window.addEventListener('scroll', "");
}
这样效果就是实现了，对了，如果还想用图片懒加载的话，可以使用vue自带的插件vue-lazyload
引入之后，只需要在img里添加v-lazy="images/...jpg"即可。
觉着好的话，记着点赞啊。
网友评论