vue 瀑布流加载数据的时候闪屏问题

是因为重新渲染了，结构改变，解决办法使用瀑布流

<template>
 <div class="hot-con" v-for="(hotitem,index) of hotData" :key="index">
          <div class="hot-img">
            <img :src="item.goods_img" ref="rankGoods" :data-src="loading">
          </div>
    </div>
</template>
<script>
  export default {
    data(){
        return {
          loading:require('loading.png')
        }
    },
     methods:{
//方法将
        lazyload(){
           var images= this.$refs.rankGoods,i=0,len=this.goods.length;
           for(;i<len;i++){
                let obj=images[i]
                if(obj.getBoundingClientRect().top - 50 < document.documentElement.clientHeight && !obj.isLoad){
                    obj.isLoad=true;//判断首次加载
                    this.imageLoaded(obj,obj.src);
                }
           }
        },
        imageLoaded(obj,src){
            console.log(src)
            var img=new Image();
            img.onload=function(){
                obj.src=img.src;
            }
            img.src=src
        }
    }
  }
</script>

//父组件
<script>
this.scroller.on('pullingUp',()=>{
            console.log('处理加载更多')
            this.hotpage+=1
            this.hots=true;
            this.gethotdata().then(
            this.$refs.hotG.lazyload()//图片懒加载
            )
            setTimeout(() => {
            // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
                this.scroller.finishPullUp()
                // this.scroller.refresh()
                this.hots=false;
            }, 2000)
        })
</script>

原文：https://www.cnblogs.com/puyongsong/p/6135143.html