You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
276 lines
7.1 KiB
276 lines
7.1 KiB
<template>
|
|
<view>
|
|
|
|
|
|
<swiper class="main-swiper" :current="currentIndex" @change="handleSwiperChange" :duration="300">
|
|
<!-- 主swiper的第一个item -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<view class="arrow-down">
|
|
<image src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/rightIcon.png"
|
|
:lazy-load="true" mode="widthFix">
|
|
</image>
|
|
</view>
|
|
<template v-if="loadedPages[0]">
|
|
<image v-show="shouldShowContent(0)" class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/cover2s.png" mode=""
|
|
:lazy-load="true"></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 主swiper的第二个item -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<view class="arrow-down">
|
|
<image src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/rightIcon.png"
|
|
:lazy-load="true" mode="widthFix">
|
|
</image>
|
|
</view>
|
|
<template v-if="loadedPages[1]">
|
|
<image v-show="shouldShowContent(1)" class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/cover3s.png" mode=""
|
|
:lazy-load="true"></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 主swiper的第三个item -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<view class="arrow-down">
|
|
<image src="https://static.ticket.sz-trip.com/epicSoul/image/chapter3/rightIcon.png"
|
|
:lazy-load="true" mode="widthFix">
|
|
</image>
|
|
</view>
|
|
<template v-if="loadedPages[2]">
|
|
<image v-show="shouldShowContent(2)" class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/cover4s.png" mode=""
|
|
:lazy-load="true"></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 主swiper的第四个item（包含嵌套swiper） -->
|
|
<swiper-item>
|
|
<!-- 当主swiper的第四个item被加载时才加载嵌套swiper -->
|
|
<template v-if="loadedPages[3]">
|
|
<swiper v-show="shouldShowContent(3)" class="nested-swiper" :vertical="true" :duration="300"
|
|
@change="handleVerticalChange" :current="verticalIndex">
|
|
<!-- 嵌套swiper的第一个item -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedNestedPages[0]">
|
|
<image v-show="shouldShowNestedContent(0)" class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/cover5s.png"
|
|
mode="" :lazy-load="true"></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 嵌套swiper的第二个item -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedNestedPages[1]">
|
|
<image v-show="shouldShowNestedContent(1)" class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/cover6s.png"
|
|
mode="" :lazy-load="true"></image>
|
|
</template>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 嵌套swiper的第三个item -->
|
|
<swiper-item>
|
|
<view class="page-container home-page">
|
|
<template v-if="loadedNestedPages[2]">
|
|
<image v-show="shouldShowNestedContent(2)" class="bg-image"
|
|
src="https://static.ticket.sz-trip.com/epicSoul/image/chapter2/cover7.png"
|
|
mode="" :lazy-load="true"></image>
|
|
<image v-show="shouldShowNestedContent(2)" @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>
|
|
</template>
|
|
</swiper-item>
|
|
</swiper>
|
|
<MusicControl />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MusicControl from '@/components/MusicControl.vue';
|
|
export default {
|
|
components: {
|
|
MusicControl
|
|
},
|
|
data() {
|
|
return {
|
|
currentIndex: 0,
|
|
verticalIndex: 0,
|
|
// 记录主swiper哪些页面已经加载过
|
|
loadedPages: {
|
|
0: false,
|
|
1: false,
|
|
2: false,
|
|
3: false
|
|
},
|
|
// 记录嵌套swiper哪些页面已经加载过
|
|
loadedNestedPages: {
|
|
0: false,
|
|
1: false,
|
|
2: false
|
|
},
|
|
// 预加载缓冲区大小
|
|
preloadBuffer: 1,
|
|
nestedPreloadBuffer: 1
|
|
}
|
|
},
|
|
computed: {
|
|
// 决定是否应该显示主swiper特定页面的内容
|
|
shouldShowContent() {
|
|
return (index) => {
|
|
return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
|
|
}
|
|
},
|
|
// 决定是否应该显示嵌套swiper特定页面的内容
|
|
shouldShowNestedContent() {
|
|
return (index) => {
|
|
return Math.abs(index - this.verticalIndex) <= this.nestedPreloadBuffer;
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
// 监听主swiper currentIndex变化，更新已加载页面状态
|
|
currentIndex(newIndex) {
|
|
// 标记当前页面和前后buffer页为已加载
|
|
for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(3, newIndex + this
|
|
.preloadBuffer); i++) {
|
|
this.loadedPages[i] = true;
|
|
}
|
|
|
|
// 当切换到第4个item时，初始化嵌套swiper的加载状态
|
|
if (newIndex === 3) {
|
|
this.loadedNestedPages[0] = true;
|
|
if (this.nestedPreloadBuffer >= 1) {
|
|
this.loadedNestedPages[1] = true;
|
|
}
|
|
}
|
|
},
|
|
// 监听嵌套swiper verticalIndex变化，更新已加载页面状态
|
|
verticalIndex(newIndex) {
|
|
// 只有当主swiper在第4个item时才更新嵌套swiper状态
|
|
if (this.currentIndex === 3) {
|
|
// 标记当前页面和前后buffer页为已加载
|
|
for (let i = Math.max(0, newIndex - this.nestedPreloadBuffer); i <= Math.min(2, newIndex + this
|
|
.nestedPreloadBuffer); i++) {
|
|
this.loadedNestedPages[i] = true;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleSwiperChange(e) {
|
|
this.currentIndex = e.detail.current;
|
|
},
|
|
handleVerticalChange(e) {
|
|
this.verticalIndex = e.detail.current;
|
|
},
|
|
goback() {
|
|
const app = getApp();
|
|
app.globalData.mainSliderIndex = 4;
|
|
uni.navigateTo({
|
|
url: '/xxdf/home/home'
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
// 初始化主swiper，标记第一页和相邻页为已加载
|
|
this.currentIndex = 0;
|
|
for (let i = 0; i <= Math.min(this.preloadBuffer, 3); i++) {
|
|
this.loadedPages[i] = true;
|
|
}
|
|
|
|
// 初始化嵌套swiper的第一页为已加载（以防万一）
|
|
this.verticalIndex = 0;
|
|
this.loadedNestedPages[0] = true;
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.btn {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 12%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
width: 250rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
|
|
.arrow-down {
|
|
width: fit-content;
|
|
height: fit-content;
|
|
position: absolute;
|
|
animation: bounce 1.5s infinite;
|
|
top: 35vh;
|
|
bottom: 0;
|
|
left: 20rpx;
|
|
margin: auto;
|
|
z-index: 100;
|
|
}
|
|
|
|
.arrow-down image {
|
|
display: block;
|
|
width: 50rpx;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
@keyframes bounce {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(-3px);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(3px);
|
|
}
|
|
}
|
|
</style>
|