Javascript – Vue Scrollen beim Laden von Bildern

Question

Anforderung: Bilder laden, wenn die Bildlaufleiste nach unten gezogen ist. Wenn die Anzahl der Bilder 30 überschreitet, entfernen Sie die ersten 6 Bilder nach dem Laden und behalten Sie 30 Dom-Knoten.

So wird es jetzt gemacht. Legen Sie in den Daten ein imgarr=[] fest, um die Bildadresse zu speichern. Rufen Sie zunächst die Werte von clientHeight, scrollTop und scrollHeight des Scroll-Elements ab und fügen Sie einen Variablenschalter hinzu isload = true. Wenn clientHeight + scrollTop > ist und isload true ist, setzen Sie isload auf false und fügen Sie dann die geladene Bildadresse zu imgArr hinzu. Das Problem besteht nun darin, dass die Anzahl der Bilder 30 erreicht , verkette ich das geladene Bild in imgArr und lösche dann die ersten 6 Bildadressen in imgArr in this.nextTick und stelle fest, dass die Bildlaufleiste nicht scrollt. Nach der Abfrage stellte ich fest, dass der Wert von scrollHeight der vorherige Wert war und die Höhe des geladenen Doms nicht enthalten war. Ist zu diesem Zeitpunkt ein Problem aufgetreten?

<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>

Answer 1

this.nextTick 换成 this.setTimeout(,0)

Answer 2

不如考虑下用插件：https://peachscript.github.io...