VUE插件-图片濑加载

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>