EpicSoul/xxdf/chapter2/cover.vue

<template>
  <swiper class="main-swiper" :current="currentIndex" @change="handleSwiperChange" :duration="300">
    <!-- 主swiper的第一个item -->
    <swiper-item>
      <view class="page-container home-page">
        <template v-if="loadedPages[0]">
          <image v-show="shouldShowContent(0)" class="bg-image" src="/static/images/chapter2/cover2.png" mode="" :lazy-load="true"></image>
        </template>
      </view>
    </swiper-item>
    
    <!-- 主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/chapter2/cover3.png" mode="" :lazy-load="true"></image>
        </template>
      </view>
    </swiper-item>
    
    <!-- 主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/chapter2/cover4.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="/static/images/chapter2/cover5.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="/static/images/chapter2/cover6.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="/static/images/chapter2/cover7.png" mode="" :lazy-load="true"></image>
                <image v-show="shouldShowNestedContent(2)" @click="goback" class="btn" src="/static/seek-btn.png" mode="" :lazy-load="true"></image>
              </template>
            </view>
          </swiper-item>
        </swiper>
      </template>
    </swiper-item>
  </swiper>
  <MusicControl />
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  watch
} from 'vue';

const currentIndex = ref(0);
const verticalIndex = ref(0);

// 记录主swiper哪些页面已经加载过
const loadedPages = reactive({
  0: false,
  1: false,
  2: false,
  3: false
});

// 记录嵌套swiper哪些页面已经加载过
const loadedNestedPages = reactive({
  0: false,
  1: false,
  2: false
});

// 预加载缓冲区大小
const preloadBuffer = 1;
const nestedPreloadBuffer = 1;

// 决定是否应该显示主swiper特定页面的内容
const shouldShowContent = (index) => {
  return Math.abs(index - currentIndex.value) <= preloadBuffer;
};

// 决定是否应该显示嵌套swiper特定页面的内容
const shouldShowNestedContent = (index) => {
  return Math.abs(index - verticalIndex.value) <= nestedPreloadBuffer;
};

// 监听主swiper currentIndex变化，更新已加载页面状态
watch(currentIndex, (newIndex) => {
  // 标记当前页面和前后buffer页为已加载
  for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(3, newIndex + preloadBuffer); i++) {
    loadedPages[i] = true;
  }
  
  // 当切换到第4个item时，初始化嵌套swiper的加载状态
  if (newIndex === 3) {
    loadedNestedPages[0] = true;
    if (nestedPreloadBuffer >= 1) {
      loadedNestedPages[1] = true;
    }
  }
}, { immediate: true });

// 监听嵌套swiper verticalIndex变化，更新已加载页面状态
watch(verticalIndex, (newIndex) => {
  // 只有当主swiper在第4个item时才更新嵌套swiper状态
  if (currentIndex.value === 3) {
    // 标记当前页面和前后buffer页为已加载
    for (let i = Math.max(0, newIndex - nestedPreloadBuffer); i <= Math.min(2, newIndex + nestedPreloadBuffer); i++) {
      loadedNestedPages[i] = true;
    }
  }
}, { immediate: true });

const handleSwiperChange = (e) => {
  currentIndex.value = e.detail.current;
};

const handleVerticalChange = (e) => {
  verticalIndex.value = e.detail.current;
};

const goback = () => {
  const app = getApp();
  app.globalData.mainSliderIndex = 4;
  uni.navigateTo({
    url: '/pages/home/home'
  });
};

onMounted(() => {
  // 初始化主swiper，标记第一页和相邻页为已加载
  currentIndex.value = 0;
  for (let i = 0; i <= Math.min(preloadBuffer, 3); i++) {
    loadedPages[i] = true;
  }
  
  // 初始化嵌套swiper的第一页为已加载（以防万一）
  verticalIndex.value = 0;
  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;
	}
</style>