console
var app = new Vue({
el: '#app',
data: {
arr: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2,2,2,2,2, 2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,],
arr2: [],
isRun: false,
peishu: 0,
},
methods: {
load() {
this.isRun = true;
console.log(123)
let min = this.peishu * 20;
let max = ++this.peishu * 20
this.arr.forEach((item, index) => {
if (index > min && index < max) {
this.arr2.push(item);
index == max-1?this.isRun=false:''
console.log(this.isRun)
}
})
}
},
created: function () {
this.load();
window.addEventListener("scroll", () => {
//页面滚动高度 document.documentElement.scrollTop;
//页面视窗高度 document.body.clientHeight;
//懒加载的box的高度 this.$refs.scroll.offsetHeight
//当 滚动高度+视窗的高度 < box的高度的时候-50 开始加载;
if (!this.isRun && document.documentElement.scrollTop + document.body.clientHeight < this.$refs.scroll.offsetHeight - 50) {
this.load();
// this.arr.forEach((item, index) => {
// if (index > 20) {
// this.arr2.push(item);
// }
// index == this.arr.length-1?this.isRun=false:''
// })
// for (let i = 1; i <= 20; i++) {
// this.arr2.push(new Date().toString());
// if (i == 20) {
// this.isRun = false
// }
// }
}
})
},
mounted: function () {
console.log(this.$refs.scroll.offsetHeight);
console.log(document.body.clientHeight)
}
})
<div id="app">
<div class="scroll" ref="scroll">
<div v-for="(item,index) in arr2" :v-key="index">{{item}}</div>
</div>
</div>
.top,.bottom{
height: 20px;
background-color:pink;
}
#app{
height: 100%
}
html,body{
height: 200px
}