一、API解析

特别注意：图片懒加载只针对 page 与 scroll-view 下的 image 有效。

• 通过查看 uni-app 相关文档 和 微信小程序相关文档，有如下属性：

属性名	类型	默认值	说明
lazy-load	Boolean	false	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

• 因此，我们只需在 image 属性中增加该属性就可以了，具体如下：

<image lazy-load v-for="(item,index) in data" :src="item"/>

• 前加载上下三屏的图片，导致无法感知懒加载的存在。其实 image 组件还有个如下隐藏的属性，官方文档里面没有标出来：

属性名	类型	默认值	说明
lazy-load-margin	Number	—	图片懒加载屏数阈值，在即将进入设置的屏数才开始加载

• 为了能更清楚的确认懒加载是否生效，我们通过将 lazy-load-margin 设置为 0，再看效果，代码如下：

<image lazy-load :lazy-load-margin="0" v-for="(item,index) in data" :src="item"/>

• 通过设置 lazy-load-margin，并结合 微信开发者工具 调试器中的 Network，我们可以很清楚的观察到懒加载的效果了。另外，可以通过 lazy-load-margin 灵活设置懒加载屏数阈值。

特别注意：图片懒加载只针对 page 与 scroll-view 下的 image 有效。

二、代码实例

<template>
	<view class="box">
		<scroll-view scroll-y style="height: 100vh;">
			<image lazy-load :lazy-load-margin="0" v-for="(item,index) in data" :src="item"/>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "index",
		data() {
			return {
				data: ['../../static/imgs/五楼.jpg', '../../static/imgs/倒影.jpg', '../../static/imgs/夕阳.jpg',
					'../../static/imgs/沙滩.jpg', '../../static/imgs/湖泊.jpg', '../../static/imgs/灯火.jpg',
					'../../static/imgs/雪山.jpg',
				]
			};
		},
		onLoad() {

		},
		methods: {

		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.box image {
		width: 100vw;
		display: block;
	}
</style>