|
|
|
@ -1,4 +1,7 @@ |
|
|
|
<template> |
|
|
|
<view> |
|
|
|
|
|
|
|
|
|
|
|
<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300"> |
|
|
|
<swiper-item> |
|
|
|
<view class="page-container home-page"> |
|
|
|
@ -44,99 +47,86 @@ |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
<MusicControl /> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { |
|
|
|
ref, |
|
|
|
reactive, |
|
|
|
onMounted, |
|
|
|
onUnmounted, |
|
|
|
watch |
|
|
|
} from 'vue'; |
|
|
|
|
|
|
|
const isVisible = ref(false); |
|
|
|
const isVisible2 = ref(false); |
|
|
|
const currentIndex = ref(0); |
|
|
|
|
|
|
|
// 记录哪些页面已经加载过 |
|
|
|
const loadedPages = reactive({ |
|
|
|
<script> |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isVisible: false, |
|
|
|
isVisible2: false, |
|
|
|
currentIndex: 0, |
|
|
|
loadedPages: { |
|
|
|
0: false, |
|
|
|
1: false, |
|
|
|
2: false, |
|
|
|
3: false |
|
|
|
}); |
|
|
|
|
|
|
|
// 加载预缓冲区大小 |
|
|
|
const preloadBuffer = 1; |
|
|
|
|
|
|
|
// 决定是否应该显示特定页面的内容 |
|
|
|
const shouldShowContent = (index) => { |
|
|
|
// 显示当前页和前后各preloadBuffer页 |
|
|
|
return Math.abs(index - currentIndex.value) <= preloadBuffer; |
|
|
|
}; |
|
|
|
|
|
|
|
// 监听currentIndex变化，更新已加载页面状态 |
|
|
|
watch(currentIndex, (newIndex) => { |
|
|
|
// 标记当前页面和前后buffer页为已加载 |
|
|
|
for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(3, newIndex + preloadBuffer); i++) { |
|
|
|
loadedPages[i] = true; |
|
|
|
} |
|
|
|
|
|
|
|
// 更新动画状态 |
|
|
|
isVisible.value = newIndex === 1; |
|
|
|
isVisible2.value = newIndex === 2; |
|
|
|
}, { immediate: true }); |
|
|
|
|
|
|
|
const handleSwiperChange = (e) => { |
|
|
|
currentIndex.value = e.detail.current; |
|
|
|
}; |
|
|
|
|
|
|
|
const goback = () => { |
|
|
|
}, |
|
|
|
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: '/pages/home/home' |
|
|
|
url: '/xxdf/home/home' |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
// 初始化时标记第一页和相邻页为已加载 |
|
|
|
loadedPages[0] = true; |
|
|
|
|
|
|
|
// 预加载第二页 |
|
|
|
if(preloadBuffer >= 1) { |
|
|
|
loadedPages[1] = true; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
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 { |
|
|
|
.main-swiper { |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.page-container { |
|
|
|
.page-container { |
|
|
|
height: 100vh; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.home-page { |
|
|
|
.home-page { |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bg-image { |
|
|
|
.bg-image { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.animate-content2 { |
|
|
|
.animate-content2 { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 25%; |
|
|
|
@ -150,9 +140,9 @@ onMounted(() => { |
|
|
|
transition: opacity 0.6s ease-out 0.2s, |
|
|
|
transform 0.6s ease-out 0.2s, |
|
|
|
filter 0.6s ease-out 0.2s; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.animate-content { |
|
|
|
.animate-content { |
|
|
|
position: absolute; |
|
|
|
left: 6%; |
|
|
|
top: 32%; |
|
|
|
@ -167,30 +157,31 @@ onMounted(() => { |
|
|
|
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 { |
|
|
|
.animate-visible { |
|
|
|
opacity: 1; |
|
|
|
transform: translateX(0) scale(1); |
|
|
|
filter: blur(0); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.feel2-img { |
|
|
|
.feel2-img { |
|
|
|
width: 300rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.feel3-img { |
|
|
|
.feel3-img { |
|
|
|
width: 100%; |
|
|
|
height: 650rpx; |
|
|
|
z-index: 2; |
|
|
|
position: relative |
|
|
|
} |
|
|
|
.feel4-img{ |
|
|
|
} |
|
|
|
|
|
|
|
.feel4-img { |
|
|
|
width: 100%; |
|
|
|
height: 400rpx; |
|
|
|
} |
|
|
|
.arrow-content { |
|
|
|
} |
|
|
|
|
|
|
|
.arrow-content { |
|
|
|
width: 100%; |
|
|
|
position: absolute; |
|
|
|
bottom: 5%; |
|
|
|
@ -200,15 +191,15 @@ onMounted(() => { |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
z-index: 2; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.arrow-down { |
|
|
|
.arrow-down { |
|
|
|
width: 200rpx; |
|
|
|
height: 40rpx; |
|
|
|
animation: bounce 1.5s infinite; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
.btn { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
bottom: 12%; |
|
|
|
@ -216,10 +207,9 @@ onMounted(() => { |
|
|
|
z-index: 2; |
|
|
|
width: 270rpx; |
|
|
|
height: 60rpx; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes bounce { |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes bounce { |
|
|
|
0%, |
|
|
|
20%, |
|
|
|
50%, |
|
|
|
@ -227,13 +217,11 @@ onMounted(() => { |
|
|
|
100% { |
|
|
|
transform: translateY(0); |
|
|
|
} |
|
|
|
|
|
|
|
40% { |
|
|
|
transform: translateY(-20rpx); |
|
|
|
} |
|
|
|
|
|
|
|
60% { |
|
|
|
transform: translateY(-10rpx); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
jiazhipeng
4 months ago