横向滑块查看大图省流

在uniapp的手机端中，纵向列表点击缩略图查看原图时，原图通常以满屏显示，并且可以通过左右滑动来切换上一张和下一张图片。

加载全部原图会占用大量的带宽以及浪费用户流量

应该获取当前图片以及前后两张图片

【includes】函数判断【readImgs】数组中是否含有当前图片位置，不存在就不显示，就不用先加载图片

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

// 图片数组
const classList = ref([{picurl:"xxx"},...]);
// 已加载的图片的位置的数组
const readImgs = ref([]);
// 当前原图的位置
const currentIndex = ref(0)

const swiperChange = (e) => {
    currentIndex.value = e.detail.current;
    readImgsFun();
}

function readImgsFun() {
    readImgs.value.push(
        currentIndex.value <= 0 ? classList.value.length - 1 : currentIndex.value - 1,
        currentIndex.value,
        currentIndex.value >= classList.value.length - 1 ? 0 : currentIndex.value + 1
    )
    readImgs.value = [...new Set(readImgs.value)];
}

注：vue3写法，未调试