实现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"即可。
觉着好的话，记着点赞啊。
有评论说要全部代码，我这边把我之前写好的代码删减一下，
各个代码位置
<template>
<div class="news-container">
<breadcrumbHead :routeList="routeList" :isSearch="true" @searchRes="searchRes"></breadcrumbHead>
<div class="company-news-page">
<div class="news-list-page" ref="scrollList" style="overflow-y: scroll;">
<commonListActivity :list="initImageList" @handleJumpDetail="handleJumpDetail"></commonListActivity>
</div>
</div>
</div>
</template>
<script>
import breadcrumbHead from "../../components/common/breadcrumbHead";
import commonListActivity from "../../components/common/commonListActivity";
export default {
data() {
return {
currentPage: 1, //当前页
routeList: [], // 面包屑路由数组
initImageList: [], // 员工活动列表数据
pagesize: 10, // 每页数量
resPage: {}, // 分页对象
inputValue: "", // 搜索框内容
totalPage: 0, // 总页数
isKaiGuan: true
};
},
created() {
this.routeList = this.$route.meta;
this.getImgNum();
},
mounted() {
if (this.$route.path == "/employeeActivity") {
this.$refs.scrollList.addEventListener("scroll", this.menu);
} else {
window.addEventListener("scroll", "");
}
},
methods: {
menu() {
if (this.isKaiGuan) {
let scroll =
this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
if (scroll > -400) {
this.page++;
this.getImgNum();
}
}
},
//滚动条在Y轴上的滚动距离
getScrollTop() {
var documentScrollTop = 0;
documentScrollTop = this.$refs.scrollList.scrollTop;
return documentScrollTop;
},
//文档的总高度
getScrollHeight() {
var documentScrollHeight = 0;
documentScrollHeight = this.$refs.scrollList.scrollHeight;
return documentScrollHeight;
},
//浏览器视口的高度
getWindowHeight() {
var windowHeight = 0;
windowHeight = this.$refs.scrollList.clientHeight;
return windowHeight;
},
// 跳转到员工活动详情
handleJumpDetail(id) {
this.$router.push({
path: "/employeeActivity/employeeDetail",
query: { id }
});
},
// 分页器功能
handleSizeChange(val) {
this.pagesize = val;
this.getImgNum();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getImgNum();
},
//根据内容搜索
searchRes(inputValue) {
this.currentPage = 1;
this.initImageList = [];
this.inputValue = inputValue;
this.getImgNum();
}
},
components: {
breadcrumbHead,
commonListActivity
}
};
</script>
