vue 滚动加载图片

Question

需求:滚动条下拉到底部的时候加载图片，一次加载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>

Answer 1

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