EpicSoul/xxdf/chapter1/detail1.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="/static/images/chapter1/feel.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/feel2.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/feel2-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 />
	</view>
</template>

<script>
	import MusicControl from '@/components/MusicControl.vue';
export default {
	components: {MusicControl},
    data() {
        return {
            isVisible: false,
            currentIndex: 0,
            loadedPages: {
                0: false,
                1: false
            },
            preloadBuffer: 1
        };
    },
    methods: {
        shouldShowContent(index) {
            return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
        },
        handleSwiperChange(e) {
            this.currentIndex = e.detail.current;
        },
        goback() {
            uni.navigateBack({
                delta: 1
            });
        }
    },
    watch: {
        currentIndex: {
            handler(newIndex) {
                for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(1, newIndex + this.preloadBuffer); i++) {
                    this.loadedPages[i] = true;
                }
                this.isVisible = newIndex === 1;
            },
            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-content {
    position: absolute;
    left: 0;
    top: 18%;
    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>