EpicSoul/xxdf/chapter1/detail4.vue

<template>
  <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/olfactory.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/olfactory2.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/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="/static/images/chapter1/olfactory4.png" mode="" :lazy-load="true"></image>
          <view v-show="shouldShowContent(2)" :class="['animate-content2', {'animate-visible': isVisible2}]">
            <image class="feel4-img" src="/static/images/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="/static/images/chapter1/olfactory3.png" mode="" :lazy-load="true"></image>
          <image v-show="shouldShowContent(3)" class="feel3-img" src="/static/images/chapter1/olfactory3-img.png" mode="" :lazy-load="true"></image>
          <image v-show="shouldShowContent(3)" @click="goback" class="btn" src="/static/seek-btn.png" mode="" :lazy-load="true"></image>
        </template>
      </view>
    </swiper-item>
  </swiper>
  <MusicControl />
</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({
  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 = () => {
  const app = getApp();
  app.globalData.mainSliderIndex = 3;
  uni.navigateTo({
    url: '/pages/home/home'
  });
};

onMounted(() => {
  // 初始化时标记第一页和相邻页为已加载
  loadedPages[0] = true;
  
  // 预加载第二页
  if(preloadBuffer >= 1) {
    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>