vuepc端实现数据加载_vue 在pc端实现滚动加载

实现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"即可。

觉着好的话，记着点赞啊。

有评论说要全部代码，我这边把我之前写好的代码删减一下，

各个代码位置

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

}

};