VUE插件-图片濑加载

Posted 2020-10-13 meixiaomin

1、  cnpm install vue-lazyload

2、main.js   

import  vue-lazyload from  ‘vue-lazyload’   

Vue.use(vue-lazyload)  
  or with options

Vue.use(vue-lazyload,{

　　　　loading:"/static/loading-svg/loading-bars.svg"   //图片显示之前的默认图片

})

 

3、vue中  遍历循环

<li v-for="(item,index) in goodsList">
  <div class="pic">
    <a href="#"><img v-lazy="‘/static/‘ +item.productImage" alt=""></a>   //图片动态绑定 要用 v-lazy
  </div>
  <div class="main">
    <div class="name">{{item.productName}}</div>
    <div class="price">{{item.salePrice}}</div>
    <div class="btn-area">
      <a href="javascript:void(0);" class="btn btn--m" @click="addCart( item.productId)">加入购物车</a>
    </div>
  </div>
</li>