解决小程序中预览图片全部一次性加载出来消耗资源的问题

问题原因

代码

<swiper circular :current="currentIndex" @change="swiperChange">
			<swiper-item v-for="item in classList" :key="item._id">
				<image @click="maskChange" :src="item.picurl" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

1.分类页面截图，及流量消耗

2.壁纸详情页面截图，及流量消耗

可以看到我在这样是一个壁纸项目的分类页面，我们现在是加载了12张图片，当我点击到详情查看大图的时候，我只是查看了1张图片，但是，他还是一次性加载了12张图，所以考虑到用户的流量消耗问题，我们这样做是不正确的。

解决方法

代码（省略了其他代码，仅显示部分关键代码）

<template>
    <swiper circular :current="currentIndex" @change="swiperChange">
			<swiper-item v-for="(item,index) in classList" :key="item._id">
				<image v-if="readImgs.includes(index)" @click="maskChange"         
    :src="item.picurl" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
</template>


<script setup>
    import {onLoad} from "@dcloudio/uni-app";
    const currentIndex = ref(0); //当前壁纸的索引值
    const readImgs = ref([]); //存放已经看过的图片
    const classList = ref([]); //详细壁纸数组
	const currentId = ref(null); //当前详情壁纸id

    const storagClassList = uni.getStorageSync("storagClassList"); //得到缓存中保存的数据
	classList.value = storagClassList.map(item => {
		return {
			...item, //将原来的数组解构出来
			picurl: item.smallPicurl.replace("_small.webp", ".jpg") //追加一条数据到数组里    
     面然后一起返回
		}
	})

    onLoad((e) => {
		//得到navigateto传递过来的id
		currentId.value = e.id;
		//拿currentId来跟详情壁纸数组中的数据id进行比较，并等到这个值在数据中对应的索引值
		currentIndex.value = classList.value.findIndex(item => item._id ==                                 
    currentId.value);
		readImgs.value.push(currentIndex.value);
	})
	//swiper组件的改变事件，把change得到的current值赋给currentIndex以表示当前预览的是第几张图片
	const swiperChange = (e) => {
		currentIndex.value = e.detail.current;
		readImgs.value.push(currentIndex.value);
	}
</script>

首先我们在点击分类中的一张图片进入到详情的时候我传了一个id过来，用来表示显示点击的那张壁纸，

然后把这个id跟当前页面的壁纸数组中的id进行比较，得到索引，

其中壁纸数组的数据是分类页面上存到缓存中的数据，通uni.getStorageSync("storagClassList");得到数据，

接着定义了一个readImgs空数组，用来存储已经读取过的图片索引。

首先是把我们当前显示的壁纸索引存到数组中，

然后再通过swiper的改变事件，当我们切换显示的图片是把切换的那个图片索引也保存到数组中。

效果展示

处理图片一次性全部加载问题

进阶升级处理

//公用的代码提成方法
	const readImageFun=()=>{
		readImgs.value.push(
			currentIndex.value <= 0 ? classList.value.length - 1 : currentIndex.value - 1,
			currentIndex.value,
			currentIndex.value >= classList.value.length-1 ? classList.value.length + 1 : currentIndex.value + 1
		);
		readImgs.value=[... new Set(readImgs.value)];//数组去重
	}
	onLoad((e) => {
		//得到navigateto传递过来的id
		currentId.value = e.id;
		//拿currentId来跟详情壁纸数组中的数据id进行比较，并等到这个值在数据中对应的索引值
		currentIndex.value = classList.value.findIndex(item => item._id == currentId.value);
		//readImgs.value.push(currentIndex.value);
		readImageFun();
	})
	//swiper组件的改变事件，把change得到的current值赋给currentIndex以表示当前预览的是第几张图片
	const swiperChange = (e) => {
		currentIndex.value = e.detail.current;
		readImageFun();
	}

修改onLoad和swiper改变事件中的代码改成这段代码我们从分类中点击图片进入到详情壁纸页面的时候，只加载当前显示的壁纸前一个和后一个壁纸图片，这样对用户的响应更加的好