最近想写个网站需要滚动加载的功能，用了element的infinite-scroll感觉局限太大，干脆自己写一个，功能如下
image
原理
vue实现滚动到底部加载数据的原理是监听页面滚动，当页面滚动到底部的时候，前端从后端获取分好页的数据加入到datas[]数组中，进行渲染，就实现了滚动加载的功能
先了解几个关键词：
（1）滚动条到顶部的位置：scrollTop
（2）当前窗口内容可视区：windowHeight
（3）滚动条内容的总高度：scrollHeight
触发监听滚动条的函数是：
window.onscroll = ()=>｛...｝
判断到底部的等式: scrollTop+windowHeight=scrollHeight;
实现
我用的是vue脚手架搭的项目，都写在App.vue文件里，代码如下
App.vue文件
<template>
<div id="app">
<div class="list" v-for="(data,index) in datas" :key="index">
{{data}}
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
datas:[],
testdatas:['1','2','3','4','5'], //初始加载测试数据
count:5, //默认加载数量
isAchiveBottom: false //滚动条是否到底部标志
}
},
created() {
//使用window.onscroll = function(){}this指向出现问题
//故应该使用箭头函数，因为箭头函数无this，会从上一级找，故会找到vue实例的this
window.onscroll = () => {
//变量scrollTop是滚动条滚动时，距离顶部的距离
var scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件(距底部20px时触发加载)
if (
scrollTop + windowHeight >= scrollHeight - 20 &&
!this.isAchiveBottom &&
!this.noMore
) {
// console.log(
// "距顶部" +
// scrollTop +
// "可视区高度" +
// windowHeight +
// "滚动条总高度" +
// scrollHeight
// );
this.isAchiveBottom = true;
//延时触发数据加载
setTimeout(() => {
//后端需要进行分页，然后前端从后端拿来实现滚动加载
//这里利用数组push来模拟从后端拿到的数据
this.datas.push("test");
this.isAchiveBottom = false;
}, 500);
}
};
},
beforeMount() {
// 在页面挂载前就发起请求
this.getInitial();
},
methods: {
getInitial(){
for (var i = 0; i < this.count; i++) {
this.datas.push(this.testdatas[i]);
}
}
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.list{
background-color: #d2d2d2;
border-radius: 3px;
width: 50%;
height: 150px;
line-height: 150px;
margin: 0 auto 20px auto;
}
</style>
github项目地址
https://github.com/rongliangtang/vue-infinite-scroll-demo.git
