<template>
<div>
<!-- 使用 van-image 组件，并设置 lazy 属性为 true 实现懒加载 -->
<van-image
v-for="(image, index) in images"
:key="index"
:src="image"
:lazy="true"
style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px;"
/>
</div>
</template>
<script>
export default {
setup() {
// 图片数组，用于展示
const images = [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg',
'https://img.yzcdn.cn/vant/apple-3.jpg',
];
return {
images,
};
},
};
</script>
<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>
在上述代码中，我们使用了 van-image 组件，并通过设置 :lazy="true" 属性启用懒加载功能。图片会在它们进入视口时开始加载，而不是在页面加载时一次性加载所有图片。
确保你的项目已经正确引入了 Vant3 并按照文档配置，以确保组件能够正常工作。注意，如果你使用了 Vant3 的 Lazyload 功能，确保图片的地址是正确的，以便懒加载正常生效。
转载请注明出处：http://www.zyzy.cn/article/detail/5751/Vant