javascript - vue menatal memuatkan imej
阿神
阿神 2017-05-18 10:59:25
0
2
646

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

闭关修行中......

membalas semua(2)
迷茫

this.nextTick digantikan dengan this.setTimeout(,0)

我想大声告诉你

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan