javascript - défilement de la vue, chargement des images
Exigence : chargez les images lorsque la barre de défilement est abaissée vers le bas. Chargez 6 images à la fois. Si le nombre d'images dépasse 30, supprimez les 6 premières images après le chargement et conservez 30 nœuds dom.
Voici comment procéder maintenant. Définissez un imgarr=[] dans les données sous forme de tableau pour stocker l'adresse de l'image. Obtenez d'abord les valeurs de clientHeight, scrollTop et scrollHeight de l'élément scroll, et ajoutez un commutateur variable. isload = true. Si clientHeight + scrollTop > scrollHeight - 30 et que isload est vrai, chargez-le, puis définissez isload sur false, puis ajoutez l'adresse de l'image chargée à imgArr. , je concaténe l'image chargée dans imgArr, puis supprime les 6 premières adresses d'image dans imgArr dans this.nextTick, et constate que la barre de défilement ne défile pas. Après avoir interrogé, j'ai découvert que la valeur de scrollHeight lorsque this.nextTick était la valeur précédente et que la hauteur du dom chargé n'était pas incluse. Ensuite, un problème est survenu à ce moment-là.
<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>
