EpicSoul/xqk/chapter5/index.vue

<template>
	<view style="width: 100vw;">
		<SwipeToNext
			:is-last-slide="isLastSlide" 
			:always-enable="swiperImages.length === 1"
			:target-path="'/xqk/chapter3/index'"
			:enable-delay="swiperImages.length > 1"
		>
		<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
			<swiper-item v-for="(image, index) in swiperImages" :key="index">
				<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
					
				</view>
			</swiper-item>
		</swiper>
</SwipeToNext>
		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
		<MusicControl />
	</view>
</template>

<script>
	import MusicControl from '@/components/MusicControl.vue';
	import NavMenu from '../components/NavMenu.vue';
	import SwipeToNext from '@/components/SwipeToNext.vue';
	export default {
		components: {
			MusicControl,
			NavMenu,
			SwipeToNext
		},
		data() {
			return {
				currentIndex: 0,
				navIndex: 5,
				swiperImages: [
					this.showImg('/uploads/20250903/dd5b260002da55d4c3d56b338451bc11.gif'),
				],
				animateShow: false,
				isLastSlide: false // 是否在最后一页
			}
		},
		onLoad(option) {
			this.currentIndex = option.currentIndex || 0
			// 对于单张图片或初始在最后一页的情况
			if (this.currentIndex == this.swiperImages.length - 1) {
				this.navIndex = 1;
				this.isLastSlide = true;
			}
			// 如果只有一张图片，也认为是最后一页
			if (this.swiperImages.length === 1) {
				this.isLastSlide = true;
			}
		},
		// onLoad(option) {
		// 	this.currentIndex = option.currentIndex || 0
		// 	if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
		// },
		methods: {
			handleJumpToPage(idx) {
				this.navIndex = idx
				if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1
			},
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
				if(this.currentIndex == 1) {
					this.animateShow = true
				}else {
					this.animateShow = false
				}
				
				if (this.currentIndex == this.swiperImages.length - 1) {
					// 判断是否切换到最后一页
					this.isLastSlide = true;
					this.navIndex = 6;
				} else {
					// 判断是否切换到最后一页
					this.isLastSlide = false;
					this.navIndex = 5
				}
			},
			// 去首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100vw;
		height: 100vh;
	}

	.swiper-item {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		background-color: #000;
		background-repeat: no-repeat;
		position: relative;

		.img2s {
			position: absolute;
			top: 380rpx;
			right: 25rpx;
			width: 358rpx;
			transform: translateX(100%);
			opacity: 0;
		}

		.img2-btn {
			width: 558rpx;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			bottom: 70rpx;
		}
		
		.img3-btn {
			width: 558rpx;
			line-height: 72rpx;
			text-align: center;
			border-radius: 20rpx;
			border: 2rpx solid;
			font-size: 30rpx;
			color: #fff;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			bottom: 180rpx;
		}
		
		.flex-column {
			position: absolute;
			bottom: 280rpx;
			width: 100%;
			align-items: center;
			
			.img5-text {
				width: 100%;
			}
			
			.img5-btn {
				width: 230rpx;
				margin-top: 99rpx;
			}
		}

		.img6-text {
			width: 408.46rpx;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			bottom: 365rpx
		}
	}

	/* 从右往左进入的动画 */
	.animate-enter-from-right {
		animation: enterFromRight 2s ease-out forwards;
	}

	@keyframes enterFromRight {
		0% {
			/* 起始位置：右侧外部 */
			transform: translateX(100%);
			opacity: 0;
		}

		100% {
			/* 结束位置：正常位置 */
			transform: translateX(0);
			opacity: 1;
		}
	}

	.swiper-img {
		width: 100vw;
		height: 100vh;
	}
</style>