EpicSoul/xxdf/chapter3/cover.vue

<template>
	<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
		<swiper-item v-for="(_, outerIndex) in 7" :key="outerIndex">
			<swiper class="nested-swiper" :duration="300" @change="(e) => handleVerticalChange(e, outerIndex)"
				:current="nestedIndices[outerIndex]">
				<!-- 嵌套swiper的第一个item（封面页） -->
				<swiper-item>
					<view class="page-container home-page">
						<image class="bg-image" :src="`/static/images/chapter3/cover${outerIndex+2}.png`" mode=""
							:lazy-load="true"></image>
						<image class="cover-txt" :class="{'cover-txt2': outerIndex > 0}"
							:src="`/static/images/chapter3/cover${outerIndex+2}-txt.png`" mode="" :lazy-load="true">
						</image>
						<image class="btn" src="/static/seek2-btn.png" mode="" :lazy-load="true"></image>
					</view>
				</swiper-item>
				<!-- 嵌套swiper的第二个item-->
				<swiper-item>
					<view class="page-container home-page">
						<view class="gif-container">
							<image v-if="shouldLoadContent(outerIndex)" class="gif-style"
								:src="`/static/3-${outerIndex+1}-2.gif`" mode="aspectFill" :lazy-load="true">
							</image>
						</view>

						<image class="bg-image" :src="`/static/images/chapter3/cover${outerIndex+2}-1.png`" mode=""
							:lazy-load="true"></image>
						<view class="qrcode-content">
							<image class="qrCode" src="/static/qrcode.png" mode="" :lazy-load="true"></image>
							<view class="code-txt">
								扫码下单
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</swiper-item>
		<swiper-item>
			<view class="page-container home-page">
				<image class="bg-image" src="/static/images/chapter3/cover9.png" mode="" :lazy-load="true"></image>
				<image @click="goRandomImage" class="cover-txt9" src="/static/images/chapter3/cover9-txt.png" mode=""
					:lazy-load="true"></image>
			</view>
		</swiper-item>
	</swiper>
	<MusicControl />
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted,
		watch,
		computed
	} from 'vue';

	const currentIndex = ref(0);

	// 嵌套swiper索引
	const nestedIndices = reactive({
		0: 0,
		1: 0,
		2: 0,
		3: 0,
		4: 0,
		5: 0,
		6: 0
	});

	// 当前活跃的页面，用于内容加载判断
	const activePages = reactive({
		mainIndex: 0,
		nestedIndices: {
			0: 0,
			1: 0,
			2: 0,
			3: 0,
			4: 0,
			5: 0,
			6: 0
		}
	});

	// 预加载缓冲区大小
	const preloadBuffer = 2;

	const shouldLoadContent = (outerIndex) => {
		// 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载
		return Math.abs(outerIndex - currentIndex.value) <= preloadBuffer &&
			(nestedIndices[outerIndex] === 1 || activePages.nestedIndices[outerIndex] === 1);
	};

	// 主swiper切换事件处理
	const handleSwiperChange = (e) => {
		currentIndex.value = e.detail.current;
		activePages.mainIndex = e.detail.current;
	};

	// 嵌套swiper切换事件处理
	const handleVerticalChange = (e, outerIndex) => {
		nestedIndices[outerIndex] = e.detail.current;
		activePages.nestedIndices[outerIndex] = e.detail.current;
	};

	const goRandomImage = () => {
		const imageArray = [{
				id: 1,
				image: '/static/images/chapter3/random/image1.png',
				name: '雏菊',
				desc: '宋 丛菊图页'
			},
			{
				id: 2,
				image: '/static/images/chapter3/random/image2.png',
				name: '杜鹃',
				desc: '清 恽寿平 花卉十开 杜鹃'
			},
			{
				id: 3,
				image: '/static/images/chapter3/random/image3.png',
				name: '金桂',
				desc: '清 蒋延锡 桂花图 局部 台北故宫博物馆院藏'
			},
			{
				id: 4,
				image: '/static/images/chapter3/random/image4.png',
				name: '绿梅',
				desc: '北宋 赵佶 梅花秀眼图页 北京故宫博物院藏'
			},
			{
				id: 5,
				image: '/static/images/chapter3/random/image5.png',
				name: '墨兰',
				desc: '宋 秋兰绽蕊图'
			},
			{
				id: 6,
				image: '/static/images/chapter3/random/image6.png',
				name: '茉莉',
				desc: '宋 茉莉花图页'
			},
			{
				id: 7,
				image: '/static/images/chapter3/random/image7.png',
				name: '青莲',
				desc: '宋 出水芙蓉图页'
			},
		];

		const app = getApp();
		app.globalData.randomImages = imageArray;
		uni.setStorageSync('randomImages', JSON.stringify(imageArray));
		uni.navigateTo({
			url: '/pages/chapter3/randomImage'
		});
	};

	const goback = () => {
		const app = getApp();
		app.globalData.mainSliderIndex = 4;
		uni.redirectTo({
			url: '/pages/home/home'
		});
	};

	onMounted(() => {
		// 初始化状态
		currentIndex.value = 0;
		activePages.mainIndex = 0;
	});
</script>

<style scoped>
	.main-swiper {
		width: 100%;
		height: 100vh;
	}

	.nested-swiper {
		width: 100%;
		height: 100vh;
	}

	.page-container {
		height: 100vh;
	}

	.home-page {
		position: relative;
		overflow: hidden;
	}

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.cover-txt {
		position: absolute;
		left: 50%;
		bottom: 22%;
		transform: translate(-50%, -50%);
		z-index: 2;
		width: 74%;
		height: 122rpx;
	}

	.cover-txt2 {
		width: 60% !important;
		height: 134rpx !important;
	}

	.cover-txt9 {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, -20%);
		z-index: 2;
		width: 360rpx;
		height: 280rpx;
	}

	.btn {
		position: absolute;
		left: 50%;
		bottom: 16%;
		transform: translate(-50%, -50%);
		z-index: 2;
		width: 244rpx;
		height: 60rpx;
	}

	.qrcode-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, -25%);
		z-index: 2;
	}

	.qrCode {
		width: 200rpx;
		height: 200rpx;
	}

	.code-txt {
		color: #333;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.gif-container {
		background: #333333;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 400rpx;
		z-index: 2;
	}

	.gif-style {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>