uniapp 图片懒加载

html

<view class="u-f wrap itembox">
			<view class="imgitem" v-for="(item,i) in list" :key="i" @click.stop="chooseFun(item)">
				<view class="u-rela" @click.stop="previewFun(item)">
					<image 
					:src="(item.show ? item.img+'?x-oss-process=video/snapshot,t_0,f_jpg' : '')"
					 mode="aspectFill" class="img"></image>
					<image src="@/static/img/stop.png" mode="" class="stopimg"></image>
				</view>

				<view class="text u-flex">
					<image src="@/static/img/c1.png" mode="" class="u-w-40 u-h-40 u-m-r-4" v-if="item.choose"></image>
					<image src="@/static/img/c.png" mode="" class="u-w-40 u-h-40 u-m-r-4" v-else></image>
					<text :class="item.choose ? 'u-color-163' :'u-color-777'">{{item.choose ? '已选' :'未选'}} </text>
				</view>
			</view>
	</view>

js

onPageScroll() { // 滚动事件 this.showImg() ，延迟时间，立即执行
	uni.$u.throttle(this.showImg, 0,true)
},
onReady() {
	let that = this
	uni.getSystemInfo({
		success(res) {
			that.windowHeight = res.windowHeight;
		}
	});
},
methods: {
	showImg() {
				let that = this
				uni.createSelectorQuery().selectAll('.imgitem').boundingClientRect((ret) => {
					ret.forEach((item, index) => {
						if (item.top <= that.windowHeight) {
							that.$set(that.list[index], 'show', true)
						}
					})
				}).exec();
			},
getlist(){

		this.list.push({
			choose: false, // 是否选中
			img: item, // img 图片路径 
			show: index<9?true:false // 9张以内 默认显示，剩余的 默认不显示
		})
					
}
}

部分css

.itembox {
	margin: 0 16rpx 0 32rpx;
	padding-bottom: 300rpx;

	.imgitem {
		border-radius: 8rpx;
		margin-top: 24rpx;
		font-size: 28rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(131, 149, 193, 0.24);
		margin-right: 16rpx;

		.img {
			width: 218rpx;
			height: 300rpx;
			border-radius: 8rpx 8rpx 0rpx 0rpx;
		}

		.text {
			padding: 16rpx 8rpx 24rpx;
		}
	}
}