首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的项目中，可以像这样使用 Lazyload 组件：
<template>
<div>
<!-- 使用 vant-lazy 组件 -->
<van-lazy>
<van-image
v-for="(item, index) in images"
:src="item"
:key="index"
/>
</van-lazy>
</div>
</template>
<script>
import { Lazy, Image } from 'vant';
export default {
components: {
[Lazy.name]: Lazy,
[Image.name]: Image,
},
setup() {
// 图片列表
const images = [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg',
];
return {
images,
};
},
};
</script>
在这个例子中，我们使用了 van-lazy 组件包裹了 van-image 组件，实现了图片的懒加载。当图片进入可视区域时，才会加载图片资源。
Lazyload 组件还支持一些其他的配置选项，例如 offset 用于设置图片进入可视区域的偏移量，loading 用于设置加载中的占位图，error 用于设置加载失败时的占位图等。你可以根据需要查看 Vant4 的官方文档获取更多信息：[Vant4 Lazyload](https://vant-contrib.gitee.io/vant/next/#/zh-CN/lazyload)。
转载请注明出处：http://www.zyzy.cn/article/detail/5835/Vant