注册 X
提交 注:点击提交后系统会发送邮件到邮箱验证!(仅支持中国大陆邮箱)
我已阅读并同意 服务条款
首页 > IT技术笔记 > 查看笔记

vant-Lazyload 懒加载

引入

`Lazyload` 是 `Vue` 指令,使用前需要对指令进行注册。

        
        
      

代码演示

基础用法

将 `v-lazy` 指令的值设置为你需要懒加载的图片。

        
        
      

        
        
      

背景图懒加载

和图片懒加载不同,背景图懒加载需要使用 `v-lazy:background-image`,值设置为背景图片的地址,需要注意的是必须声明容器高度。

        
        
      

组件懒加载

将需要懒加载的组件放在 `lazy-component` 标签中,即可实现组件懒加载。

        
        
      

        
        
      

API

Options

参数说明类型默认值
loading加载时的图片string-
error错误时的图片string-
preload预加载高度的比例string-
attempt尝试次数number3
listenEvents监听的事件string[]scroll
adapter适配器object-
filter图片 URL 过滤object-
lazyComponent是否能懒加载模块booleanfalse

> 更多内容请参照:

vue-lazyload 官方文档


 打赏        分享



评论

邮箱: 昵称: