Vue-lazyload 的使用

Vue 项目使用 Vue-lazyload 做图片懒加载。

下载

下载 Vue-lazyload 的包
NPM包

npm install vue-lazyload --save

引入

在项目 main.js中通过 import 引入

import Vue from  vue 
import App from  @/App 
import VueLazyload from  vue-lazyload

配置属性

Vue.use( VueLazyload, {
  preLoad: 1.3,
  error: require( @/assets/loding@3x.png ),
  loading: require( @/assets/loding@3x.png ),
  attempt: 1
})

官方 Api

属性	描述	默认	选项
`preLoad`	预加载高度的比例	`1.3`	`Number`
`error`	图片加载失败后	`data-src`	`String`
`loading`	图像正在加载时	`data-src`	`String`
`attempt`	尝试次数	`3`	`Number`
`listenEvents`	需要监听的事件	`[ scroll , wheel , mousewheel , resize , animationend , transitionend , touchmove ]`	所需监听的事件
`adapter`	动态修改元素的属性	`{ }`	元素适配器
`filter`	图像的 src 过滤器	`{ }`	图像 url 过滤器
`lazyComponent`	lazyload 组件	`false`	懒加载组件

示例

使用 v-lazy 指令

<div class="main">
  <div class="list" v-if="list.length > 0" v-for="(item, index) of list" :key="index" @click="goInfo(index, item.url_address)">
    <div class="img">
      <img v-lazy="item.img_url" >
    </div>
    <p class="txt" v-text="item.title"></p>
  </div>
  <div class="noMore">已经到底啦~</div>
  <p class="list" v-if="list.length<=0">活动筹备中...</p>
</div>

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END