EpicSoul/xxdf/chapter3/cover.vue

<template>
	<view>
		
	
    <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="handleVerticalChange" :current="nestedIndices[outerIndex]">
                <!-- 嵌套swiper的第一个item（封面页） -->
                <swiper-item>
                    <view class="page-container home-page">
                        <image class="bg-image" :src="'https://static.ticket.sz-trip.com/epicSoul/images/chapter3/cover' + (outerIndex+2) + '.png'" mode="" :lazy-load="true"></image>
                        <image class="cover-txt" :class="{'cover-txt2': outerIndex > 0}" :src="'https://static.ticket.sz-trip.com/epicSoul/images/chapter3/cover' + (outerIndex+2) + '-txt.png'" mode="" :lazy-load="true"></image>
                        <image class="btn" src="https://static.ticket.sz-trip.com/epicSoul/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="'https://static.ticket.sz-trip.com/epicSoul/3-' + (outerIndex+1) + '-2.gif'" mode="aspectFill" :lazy-load="true"></image>
                        </view>

                        <image class="bg-image" :src="'https://static.ticket.sz-trip.com/epicSoul/images/chapter3/cover' + (outerIndex+2) + '-1.png'" mode="" :lazy-load="true"></image>
                        <view class="qrcode-content">
                            <image class="qrCode" src="https://static.ticket.sz-trip.com/epicSoul/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="https://static.ticket.sz-trip.com/epicSoul/images/chapter3/cover9.png" mode="" :lazy-load="true"></image>
                <image @click="goRandomImage" class="cover-txt9" src="https://static.ticket.sz-trip.com/epicSoul/images/chapter3/cover9-txt.png" mode="" :lazy-load="true"></image>
            </view>
        </swiper-item>
    </swiper>
    <MusicControl />
	</view>
</template>

<script>
export default {
    data() {
        return {
            currentIndex: 0,
            // 嵌套swiper索引
            nestedIndices: {
                0: 0,
                1: 0,
                2: 0,
                3: 0,
                4: 0,
                5: 0,
                6: 0
            },
            // 当前活跃的页面，用于内容加载判断
            activePages: {
                mainIndex: 0,
                nestedIndices: {
                    0: 0,
                    1: 0,
                    2: 0,
                    3: 0,
                    4: 0,
                    5: 0,
                    6: 0
                }
            },
            // 预加载缓冲区大小
            preloadBuffer: 2
        }
    },
    methods: {
        // 主swiper切换事件处理
        handleSwiperChange(e) {
            this.currentIndex = e.detail.current;
            this.activePages.mainIndex = e.detail.current;
        },
        
        // 嵌套swiper切换事件处理
        handleVerticalChange(e) {
            const outerIndex = parseInt(e.target.dataset.index);
            this.nestedIndices[outerIndex] = e.detail.current;
            this.activePages.nestedIndices[outerIndex] = e.detail.current;
        },
        
        goRandomImage() {
            const imageArray = [
                {
                    id: 1,
                    image: 'https://static.ticket.sz-trip.com/epicSoul/images/chapter3/random/image1.png',
                    name: '雏菊',
                    desc: '宋 丛菊图页'
                },
                {
                    id: 2,
                    image: 'https://static.ticket.sz-trip.com/epicSoul/images/chapter3/random/image2.png',
                    name: '杜鹃',
                    desc: '清 恽寿平 花卉十开 杜鹃'
                },
                {
                    id: 3,
                    image: 'https://static.ticket.sz-trip.com/epicSoul/images/chapter3/random/image3.png',
                    name: '金桂',
                    desc: '清 蒋延锡 桂花图 局部 台北故宫博物馆院藏'
                },
                {
                    id: 4,
                    image: 'https://static.ticket.sz-trip.com/epicSoul/images/chapter3/random/image4.png',
                    name: '绿梅',
                    desc: '北宋 赵佶 梅花秀眼图页 北京故宫博物院藏'
                },
                {
                    id: 5,
                    image: 'https://static.ticket.sz-trip.com/epicSoul/images/chapter3/random/image5.png',
                    name: '墨兰',
                    desc: '宋 秋兰绽蕊图'
                },
                {
                    id: 6,
                    image: 'https://static.ticket.sz-trip.com/epicSoul/images/chapter3/random/image6.png',
                    name: '茉莉',
                    desc: '宋 茉莉花图页'
                },
                {
                    id: 7,
                    image: 'https://static.ticket.sz-trip.com/epicSoul/images/chapter3/random/image7.png',
                    name: '青莲',
                    desc: '宋 出水芙蓉图页'
                },
            ];

            const app = getApp();
            app.globalData.randomImages = imageArray;
            uni.setStorageSync('randomImages', JSON.stringify(imageArray));
            uni.navigateTo({
                url: '/xxdf/chapter3/randomImage'
            });
        },
        
        goback() {
            const app = getApp();
            app.globalData.mainSliderIndex = 4;
            uni.redirectTo({
                url: '/xxdf/home/home'
            });
        }
    },
    computed: {
        shouldLoadContent() {
            return (outerIndex) => {
                // 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载
                return Math.abs(outerIndex - this.currentIndex) <= this.preloadBuffer &&
                    (this.nestedIndices[outerIndex] === 1 || this.activePages.nestedIndices[outerIndex] === 1);
            }
        }
    },
    mounted() {
        // 初始化状态
        this.currentIndex = 0;
        this.activePages.mainIndex = 0;
    },
    beforeDestroy() {
        // 组件销毁前的清理工作（如果有）
    }
}
</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>