EpicSoul/xxdf/chapter1/detail4.vue

<template>
	<view>
		
	
    <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="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/olfactorys.png" mode="" :lazy-load="true"></image>
                    <view v-show="shouldShowContent(0)" class="arrow-content">
                        <image class="arrow-down" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/botIcon.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="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/olfactory2.png" mode="" :lazy-load="true"></image>
                    <view v-show="shouldShowContent(1)" :class="['animate-content', {'animate-visible': isVisible}]">
                        <image class="feel2-img" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/olfactory2-img.png" mode="" :lazy-load="true"></image>
                    </view>
                </template>
            </view>
        </swiper-item>

        <swiper-item>
            <view class="page-container home-page">
                <template v-if="loadedPages[2]">
                    <image v-show="shouldShowContent(2)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/olfactory4.png" mode="" :lazy-load="true"></image>
                    <view v-show="shouldShowContent(2)" :class="['animate-content2', {'animate-visible': isVisible2}]">
                        <image class="feel4-img" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/olfactory4-img.png" mode="" :lazy-load="true"></image>
                    </view>
                </template>
            </view>
        </swiper-item>

        <swiper-item>
            <view class="page-container home-page">
                <template v-if="loadedPages[3]">
                    <image v-show="shouldShowContent(3)" class="bg-image" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/olfactory3.png" mode="" :lazy-load="true"></image>
                    <image v-show="shouldShowContent(3)" class="feel3-img" src="https://static.ticket.sz-trip.com/epicSoul/image/chapter1/olfactory3-img.png" mode="" :lazy-load="true"></image>
                    <image v-show="shouldShowContent(3)" @click="goback" class="btn" src="https://static.ticket.sz-trip.com/epicSoul/seek-btn.png" mode="" :lazy-load="true"></image>
                </template>
            </view>
        </swiper-item>
    </swiper>
    <MusicControl />
	<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
	</view>
</template>

<script>
import MusicControl from '@/components/MusicControl.vue';
import NavMenu from '../components/NavMenu.vue';
export default {
	components: {
	    MusicControl,
		NavMenu
	},
    data() {
        return {
            isVisible: false,
            isVisible2: false,
            currentIndex: 0,
            loadedPages: {
                0: false,
                1: false,
                2: false,
                3: false
            },
            preloadBuffer: 1
        };
    },
    methods: {
        shouldShowContent(index) {
            return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
        },
        handleSwiperChange(e) {
            this.currentIndex = e.detail.current;
        },
        goback() {
            // const app = getApp();
            // app.globalData.mainSliderIndex = 3;
            uni.navigateTo({
                url: '/xxdf/chapter1/cover1'
            });
        }
    },
    watch: {
        currentIndex: {
            handler(newIndex) {
                for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(3, newIndex + this.preloadBuffer); i++) {
                    this.loadedPages[i] = true;
                }
                this.isVisible = newIndex === 1;
                this.isVisible2 = newIndex === 2;
            },
            immediate: true
        }
    },
    mounted() {
        this.loadedPages[0] = true;
        if (this.preloadBuffer >= 1) {
            this.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-content2 {
    position: absolute;
    left: 0;
    top: 25%;
    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-content {
    position: absolute;
    left: 6%;
    top: 32%;
    width: 100%;
    display: flex;
    z-index: 2;
    /* 初始状态 */
    opacity: 0;
    transform: translateX(-50px) scale(0.95);
    filter: blur(2px);
    /* 过渡效果 */
    transition: opacity 0.7s ease-out 0.3s,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s,
    filter 0.6s ease-out 0.3s;
}

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

.feel2-img {
    width: 300rpx;
}

.feel3-img {
    width: 100%;
    height: 650rpx;
    z-index: 2;
    position: relative
}

.feel4-img {
    width: 100%;
    height: 400rpx;
}

.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: 270rpx;
    height: 60rpx;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20rpx);
    }
    60% {
        transform: translateY(-10rpx);
    }
}
</style>