javascript - vue 滚动加载图片

问题描述

问 题

需求:滚动条下拉到底部的时候加载图片，一次加载6张图片，如果图片数量超过30个，那么加载结束后把最前面的6张图片去除掉，保持30个dom节点。

现在的是这样做的，在data里面设置一个imgarr=[]作为图片地址存储的数组，首先获取滚动元素的clientHeight、scrollTop、scrollHeight的值，并且添加一个变量开关isload = true，如果clientHeight + scrollTop > scrollHeight - 30，并且 isload是true，就去加载，然后把isload设置为false，然后把加载出来的图片地址添加到imgArr里面，现在遇到的问题是当图片的数量到了30张的时候，我把加载出来的图片concat到imgArr里面，然后在this.nextTick里面把imgArr里面的前面6个图片地址删除，发现滚动条不滚动了。经过查询知道this.nextTick的时候scrollHeight的值是之前的值，没有把加载出来的dom的高度算上，然后这时候就出问题了，请问有人遇到过这个问题么？

<template>
  <div class="content">
    <ul class="imglist">
      <li class="imgli"  v-for="(item,index) in imgarr" v-lazy:background-image="item" >{{index}}</li>
    </ul>
  </div>
</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>

解决方案

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

这篇关于javascript - vue 滚动加载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！