需求:滾動條下拉到底部的時候加載圖片,一次加載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...