需求:滚动条下拉到底部的时候加载图片,一次加载6张图片,如果图片数量超过30个,那么加载结束后把最前面的6张图片去除掉,保持30个dom节点。
现在的是这样做的,在data里面设置一个imgarr=[]作为图片地址存储的数组,首先获取滚动元素的clientHeight、scrollTop、scrollHeight的值,并且添加一个变量开关isload = true,如果clientHeight + scrollTop > scrollHeight - 30,并且 isload是true,就去加载,然后把isload设置为false,然后把加载出来的图片地址添加到imgArr里面,现在遇到的问题是当图片的数量到了30张的时候,我把加载出来的图片concat到imgArr里面,然后在this.nextTick里面把imgArr里面的前面6个图片地址删除,发现滚动条不滚动了。经过查询知道this.nextTick的时候scrollHeight的值是之前的值,没有把加载出来的dom的高度算上,然后这时候就出问题了,请问有人遇到过这个问题么?
<template>
<p class="content">
<ul class="imglist">
<li class="imgli" v-for="(item,index) in imgarr" v-lazy:background-image="item" >{{index}}</li>
</ul>
</p>
</template>
<script>
export default{
data(){
return {
imgarr: [
'https://img.alicdn.com/tfs/TB1H7PtQVXXXXbzXVXXXXXXXXXX-750-1206.jpg',
'https://img.alicdn.com/tfs/TB1H7PtQVXXXXbzXVXXXXXXXXXX-750-1206.jpg',
'https://img.alicdn.com/tfs/TB10SDQQVXXXXaBXFXXXXXXXXXX-1440-800.jpg',
'https://img.alicdn.com/tfs/TB14BS4QVXXXXcmXpXXXXXXXXXX-706-1077.jpg',
'https://img.alicdn.com/tfs/TB1ffqxQVXXXXcpXpXXXXXXXXXX-706-1077.jpg'
],
isload:true
}
},
mounted(){
const self = this;
const clientHeight = document.querySelector(".imglist").clientHeight;
const loadpoint = document.querySelector('.imgli').clientHeight * 0.15;
document.querySelector('.imglist').addEventListener("scroll",function(){
let scrollTop = document.querySelector(".imglist").scrollTop;
let scrollHeight = document.querySelector(".imglist").scrollHeight;
if(clientHeight + scrollTop > scrollHeight - loadpoint && self.isload == true){
self.isload = false;
let newimgArr = [
'https://img.alicdn.com/tfs/TB1ufH9QVXXXXXOXXXXXXXXXXXX-1440-800.jpg',
'https://img.alicdn.com/tfs/TB1ufH9QVXXXXXOXXXXXXXXXXXX-1440-800.jpg',
'https://img.alicdn.com/tfs/TB1ffqxQVXXXXcpXpXXXXXXXXXX-706-1077.jpg',
'https://img.alicdn.com/tfs/TB1Gqh3QVXXXXXsapXXXXXXXXXX-750-940.jpg',
'https://img.alicdn.com/tfs/TB1p7FZQVXXXXclXVXXXXXXXXXX-200-200.png'
];
self.imgarr = self.imgarr.concat(newimgArr);
console.log(scrollHeight)//1153
self.$nextTick(function(){
let scrollHeight = document.querySelector(".imglist").scrollHeight;
console.log(scrollHeight)//如果没有上面那句话就是1153,如果有就是2307
})
}
if(scrollTop < 0){
}
},false);
},
</script>
this.nextTick 换成 this.setTimeout(,0)
不如考虑下用插件:https://peachscript.github.io...