核心代码
在你的全局顶部引入和初始化
Vue.use(vant.Lazyload, {
loading: '/StaticFile/img/jiazai.jpg',
error: '/StaticFile/img/jiazai.jpg',
lazyComponent: false,
});//图片懒加载 <img v-lazy="'https://img-blog.csdnimg.cn/direct/3d2c8a7e2c0040488a8128c3e381d58b.png'" alt="我是图片"><img v-lazy="'图片路径'" alt="我是图片">重要的话说三遍
如果你的v-lazy属性里写的不是变量，而是具体路径的话，
具体路径一定要用引号包住；
具体路径一定要用引号包住；
具体路径一定要用引号包住；
<img v-lazy="imgUrl" alt="我是图片">如上；如果是一个变量则不需要
因为Vant在处理的时候会把v-lazy属性的值当做JS来处理；
比如下面的代码
//加了引号的值
var imgUrl='https://img01.yzcdn.cn/vant/cat.jpeg';
//没加引号的值，这样的代码在语法上是错误的，所以，在使用时，请特别注意
var imgUrl=https://img01.yzcdn.cn/vant/cat.jpeg;具体路径一定要用引号包住；
具体路径一定要用引号包住；
具体路径一定要用引号包住；
重点
该代码必须在vue下才能正常运行。 如果你的项目是Vue脚手架搭建，请自动绕过。
如果你的Vant是引入的，操作方式如下
<!DOCTYPE html>
<html>
<head>
<title>橙-极纪元JJY.Cheng</title>
<meta name="keywords" content="橙-极纪元JJY.Cheng">
<meta name="description" content="橙-极纪元JJY.Cheng">
<script src="/StaticFile/Mob/js/common/vue2.6.14.min.js"></script>
<link rel="stylesheet" href="/StaticFile/Mob/js/common/vant2.12.53/vant2.12.53.index.css" />
<script src="/StaticFile/Mob/js/common/vant2.12.53/vant2.12.53.min.js"></script>
</head>
<body>
<div class="QXUI-Box" id="CommonContentVueObj">
<img v-lazy="'https://img-blog.csdnimg.cn/direct/3d2c8a7e2c0040488a8128c3e381d58b.png'" alt="我是图片">
</div>
<script>
Vue.use(vant.Lazyload, {
loading: '/StaticFile/img/jiazai.jpg',
error: '/StaticFile/img/jiazai.jpg',
lazyComponent: false,
});//图片懒加载
//公共--内容-主要用于图片懒加载 start
var CommonContentVueObj = new Vue({
el: '#CommonContentVueObj',
data: {
},
created: function () {
},
methods: {
}
});
//公共--内容-主要用于图片懒加载 end
</script>
</body>
</html>文档说明
官方地址：
Lazyload 懒加载：Vant 2 - Mobile UI Components built on Vue
重点
我上面的代码只用了【Lazyload懒加载】，没有使用【Image 图片】
Lazyload 懒加载，配置说明
Vue.use(vant.Lazyload, {
loading: '/StaticFile/img/jiazai.jpg',
error: '/StaticFile/img/jiazai.jpg',
lazyComponent: false,
});| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| loading | 加载时的图片 | string | - |
| error | 错误时的图片 | string | - |
| preload | 预加载高度的比例 | string | - |
| attempt | 尝试次数 | number | 3 |
| listenEvents | 监听的事件 | string[] | scroll等 |
| adapter | 适配器 | object | - |
| filter | 图片 URL 过滤 | object | - |
| lazyComponent | 是否能懒加载模块 | boolean | false |
