EpicSoul/xxdf/chapter1/detail2.vue

<template>
	<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
		<swiper-item>
			<view class="page-container home-page">
				<template v-if="loadedPages[0]">
					<image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter1/vision.png"
						mode="" :lazy-load="true"></image>
					<view v-show="shouldShowContent(0)" class="arrow-content">
						<image class="arrow-down" src="/static/arrow-icon-black.png" mode="" :lazy-load="true"></image>
					</view>
				</template>
			</view>
		</swiper-item>

		<swiper-item>
			<view class="page-container home-page">
				<template v-if="loadedPages[1]">
					<image v-show="shouldShowContent(1)" class="bg-image" src="/static/images/chapter1/vision2.png"
						mode="" :lazy-load="true"></image>
					<view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
						<image class="feel2-img" src="/static/images/chapter1/vision2-img.png" mode=""
							:lazy-load="true"></image>
					</view>
					<image v-show="shouldShowContent(1)" @click="goback" class="btn" src="/static/reselect-btn.png"
						mode="" :lazy-load="true"></image>
				</template>
			</view>
		</swiper-item>
	</swiper>
	<MusicControl />
</template>

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

	const isVisible = ref(false);
	const currentIndex = ref(0);

	// 记录哪些页面已经加载过
	const loadedPages = reactive({
		0: false,
		1: false
	});

	// 加载预缓冲区大小
	const preloadBuffer = 1; // 对于只有两个页面的轮播，1就足够了

	// 决定是否应该显示特定页面的内容
	const shouldShowContent = (index) => {
		// 显示当前页和前后各preloadBuffer页
		return Math.abs(index - currentIndex.value) <= preloadBuffer;
	};

	// 监听currentIndex变化，更新已加载页面状态
	watch(currentIndex, (newIndex) => {
		// 标记当前页面和前后buffer页为已加载
		for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(1, newIndex + preloadBuffer); i++) {
			loadedPages[i] = true;
		}

		// 更新动画状态
		isVisible.value = newIndex === 1;
	}, {
		immediate: true
	});

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

	const goback = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	onMounted(() => {
		// 初始化时标记第一页和相邻页为已加载
		loadedPages[0] = true;
		// 由于只有两页且预加载缓冲区为1，所以第二页也会被标记为已加载
		if (preloadBuffer >= 1) {
			loadedPages[1] = true;
		}
	});
</script>


<style scoped>
	.main-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;
	}


	.animate-content {
		position: absolute;
		left: 0;
		top: 16%;
		width: 100%;
		display: flex;
		justify-content: center;
		z-index: 2;
		opacity: 0;
		transform: scale(0.9);
		filter: blur(5px);
		transition: opacity 0.6s ease-out 0.2s,
			transform 0.6s ease-out 0.2s,
			filter 0.6s ease-out 0.2s;
	}

	.animate-visible {
		opacity: 1;
		transform: scale(1);
		filter: blur(0px);
	}


	.feel2-img {
		width: 89%;
		height: 248rpx;
	}

	.arrow-content {
		width: 100%;
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
	}

	.arrow-down {
		width: 200rpx;
		height: 40rpx;
		animation: bounce 1.5s infinite;
	}

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

	@keyframes bounce {

		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0);
		}

		40% {
			transform: translateY(-20rpx);
		}

		60% {
			transform: translateY(-10rpx);
		}
	}
</style>