javascript - vue scrolling loading images

Question

Requirements: Load pictures when the scroll bar is pulled down to the bottom. Load 6 pictures at a time. If the number of pictures exceeds 30, then remove the first 6 pictures after the loading is completed and keep 30 dom nodes.

This is how it is done now. Set an imgarr=[] in the data as an array to store the image address. First get the values ​​of clientHeight, scrollTop, and scrollHeight of the scroll element, and add a variable switch isload = true. If clientHeight scrollTop > scrollHeight - 30, and isload is true, load it, then set isload to false, and then add the loaded image address to imgArr. The problem now is when the number of images reaches 30 , I concat the loaded image into imgArr, and then delete the first 6 image addresses in imgArr in this.nextTick, and find that the scroll bar does not scroll. After querying, I found that the value of scrollHeight when this.nextTick was the previous value, and the height of the loaded dom was not included. Then a problem occurred at this time. Has anyone encountered this problem?

<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 is replaced by this.setTimeout(,0)

Answer 2

Why not consider using a plug-in: https://peachscript.github.io...