javascript - vue menatal memuatkan imej

Question

Keperluan: Muatkan gambar apabila bar skrol ditarik ke bawah Muatkan 6 gambar pada satu masa Jika bilangan gambar melebihi 30, kemudian keluarkan 6 gambar pertama selepas dimuatkan dan simpan 30 nod dom.

Beginilah ia dilakukan sekarang Tetapkan imgarr=[] dalam data sebagai tatasusunan untuk menyimpan alamat imej Mula-mula dapatkan nilai clientHeight, scrollTop, dan scrollHeight bagi elemen tatal, dan tambahkan suis berubah. isload = true. Jika clientHeight + scrollTop > scrollHeight - 30, dan isload adalah benar, muatkannya, kemudian tetapkan isload kepada false, dan kemudian tambahkan alamat imej yang dimuatkan kepada imgArr , saya menggabungkan imej yang dimuatkan ke dalam imgArr, dan kemudian memadamkan 6 alamat imej pertama dalam imgArr dalam this.nextTick, dan mendapati bar skrol tidak menatal. Selepas membuat pertanyaan, saya mendapati bahawa nilai scrollHeight apabila this.nextTick ialah nilai sebelumnya, dan ketinggian dom yang dimuatkan tidak disertakan Kemudian masalah berlaku pada masa ini.

<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 digantikan dengan this.setTimeout(,0)

Answer 2

Mengapa tidak pertimbangkan untuk menggunakan pemalam: https://peachscript.github.io...