Vue-lazyload 的使用
Posted evenyao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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/[email protected]‘), loading: require(‘@/assets/[email protected]‘), 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" alt=""> </div> <p class="txt" v-text="item.title"></p> </div> <div class="noMore">已经到底啦~</div> <p class="list" v-if="list.length<=0">活动筹备中...</p> </div>
以上是关于Vue-lazyload 的使用的主要内容,如果未能解决你的问题,请参考以下文章