Vant-ui图片懒加载

发布时间：2024年01月11日

核心代码

在你的全局顶部引入和初始化

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>

文档说明

官方地址：

Image 图片：Vant 2 - Mobile UI Components built on Vue

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尝试次数number3
listenEvents监听的事件string[]scroll等
adapter适配器object-
filter图片 URL 过滤object-
lazyComponent是否能懒加载模块booleanfalse

文章来源:https://blog.csdn.net/cplvfx/article/details/135528856
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章