EpicSoul/xxdf/chapter2/cover.vue

<template>
	<view>
		
	
  <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 />
  </view>
</template>

<script>
export default {
  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;
}
</style>