简介

  • Vue中的图片懒加载插件
  • 可以用于图片列表或者背景图片的延时加载
  • 如果有组件服用问题,需要添加key属性来确保数据变化后更新视图

安装

插件安装:npm i vue-lazyload --save

使用

  • src/main.js入口文件中引入
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
  • vue组件中使用
<div class="post_item_imgs clearfix">
  <div class="post_item_imgs_div"
    :class="{heng:img.type==1||img.type==4}"
    v-for="(img, i) in item.imgs" :key="img.imgUrl+i"
    v-lazy:background-image="img.imgUrl"
  >
    <img v-lazy="img.imgUrl" :key="img.imgUrl" :preview="index" @click.stop class="needsclick">
  </div>
</div>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注