bug fix and performance improvements

src/views/website/home/index.vue

@@ -1,32 +1,34 @@
 <template>
-  <div v-loading="loading" class="fullPage" ref="fullPageRef">
+  <div ref="fullPageRef" v-loading="loading" class="fullPage">
     <div class="indicator">
       <div
-        :class="`${state.fullpage.current == idx ? 'active' : ''}`"
-        v-for="idx in len"
-        :key="idx"
+        v-for="idx in 6"
         :id="idx.toString()"
+        :key="idx"
+        :class="`${indicatorActiveIndex == idx ? 'active' : ''}`"
         class="point"
         @click="handleIndicatorClick(idx)"
       ></div>
     </div>
     <div
-      class="fullPageContainer"
-      :data-index="state.fullpage.current"
       ref="fullPageContainerRef"
+      :data-index="state.fullpage.current"
+      class="fullPageContainer"
       @mousewheel="mouseWheelHandle"
     >
       <!-- @DOMMouseScroll="mouseWheelHandle" -->
       <div
         v-for="(item, $index) in state.boxList"
-        class="section"
         :key="$index"
         :style="`z-index: ${item.zIndex};`"
+        class="section"
       >
         <!-- v-if="`index${state.fullpage.current}` == item.title" -->
         <component
-          v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1"
           :is="item.comp"
+          v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1"
+          :map-index="mapIndex"
+          @changeMapIndex="mapIndex = $event"
         ></component>
       </div>
     </div>
@@ -50,21 +52,9 @@
 </template>
 
 <script setup>
-import {
-  reactive,
-  onMounted,
-  ref,
-  shallowRef,
-  onUnmounted,
-  computed,
-} from "vue";
+import { computed, onMounted, reactive, ref, shallowRef } from "vue";
+import index0 from "./comp/index0.vue";
 import index1 from "./comp/index1.vue";
-import index2 from "./comp/index2.vue";
-import index3 from "./comp/index3.vue";
-import index4 from "./comp/index4.vue";
-import index5 from "./comp/index5.vue";
-import index6 from "./comp/index6.vue";
-import index7 from "./comp/index7.vue";
 import index8 from "./comp/index8.vue";
 
 const loading = ref(true);
@@ -73,6 +63,8 @@ setTimeout(() => {
 }, 500);
 const fullPageRef = ref();
 const fullPageContainerRef = ref();
+const mapIndex = ref(0); // 0-3
+const mapRef = ref();
 onMounted(() => {
   fullPageContainerRef.value.addEventListener(
     "DOMMouseScroll",
@@ -88,6 +80,7 @@ onMounted(() => {
 // });
 const len = computed(() => state.boxList.length);
 // const len = ref(6);
+
 const next = () => {
   // 往下切换
   // TODO:
@@ -106,6 +99,7 @@ const pre = () => {
     move(state.fullpage.current); // 执行切换
   }
 };
+
 function move(index) {
   state.fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
   directToMove(index); //执行滚动
@@ -114,6 +108,7 @@ function move(index) {
     state.fullpage.isScrolling = false;
   }, 1010);
 }
+
 function directToMove(index) {
   let height = fullPageRef.value["clientHeight"]; //获取屏幕的宽度
   // let scrollPage = proxy.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
@@ -122,6 +117,7 @@ function directToMove(index) {
   fullPageContainerRef.value.style.transform = `translateY(${scrollHeight})`;
   state.fullpage.current = index;
 }
+
 function mouseWheelHandle(event) {
   // 监听鼠标监听
   // 添加冒泡阻止
@@ -157,35 +153,10 @@ let state = reactive({
       zIndex: 1,
       title: "index1",
     },
-    // {
-    //   comp: shallowRef(index2),
-    //   zIndex: 1,
-    //   title: "index2",
-    // },
     {
-      comp: shallowRef(index3),
+      comp: shallowRef(index0),
       zIndex: 1,
-      title: "index3",
-    },
-    // {
-    //   comp: shallowRef(index4),
-    //   zIndex: 1,
-    //   title: "index4",
-    // },
-    {
-      comp: shallowRef(index5),
-      zIndex: 1,
-      title: "index5",
-    },
-    {
-      comp: shallowRef(index6),
-      zIndex: 1,
-      title: "index6",
-    },
-    {
-      comp: shallowRef(index7),
-      zIndex: 1,
-      title: "index7",
+      title: "index1",
     },
     {
       comp: shallowRef(index8),
@@ -199,19 +170,46 @@ let state = reactive({
   },
 });
 
+const indicatorActiveIndex = computed(() => {
+  if (state.fullpage.current === 1) {
+    return 1;
+  } else if (state.fullpage.current === 2) {
+    return mapIndex.value + 2;
+  } else {
+    return state.fullpage.current + 3;
+  }
+});
+
 // 点击 indicator 时
 const handleIndicatorClick = (idx) => {
-  if (idx == state.fullpage.current) {
-    return;
-  } else if (idx > state.fullpage.current) {
-    for (let i = state.fullpage.current; i < idx; i++) {
+  console.log(idx);
+  let boxIndex;
+  let _mapIndex;
+  if (idx === 1) {
+    boxIndex = 1;
+    _mapIndex = null;
+  } else if (idx <= 5) {
+    boxIndex = 2;
+    _mapIndex = idx - 2;
+  } else {
+    boxIndex = 3;
+    _mapIndex = null;
+  }
+
+  if (boxIndex > state.fullpage.current) {
+    for (let i = state.fullpage.current; i < boxIndex; i++) {
       next();
     }
-  } else {
-    for (let i = state.fullpage.current; i > idx; i--) {
+  } else if (boxIndex < state.fullpage.current) {
+    for (let i = state.fullpage.current; i > boxIndex; i--) {
       pre();
     }
   }
+  if (_mapIndex !== null && _mapIndex !== mapIndex.value) {
+    // mapRef.value?.loadMapByIndex(_mapIndex)
+    // console.log(mapRef.value.loadMapByIndex)
+    mapIndex.value = _mapIndex;
+  }
 };
 </script>
 
@@ -221,32 +219,38 @@ const handleIndicatorClick = (idx) => {
   height: 100%;
   overflow: hidden;
   position: relative;
+
   .indicator {
     position: absolute;
     top: 50%;
     right: 20px;
     z-index: 999;
     transform: translateY(-50%);
+
     .point {
       transition: all 1s;
       width: 12px;
       height: 12px;
       background-color: #999;
       border-radius: 50%;
+
       &.active {
         background-color: #0054ff;
       }
+
       &:not(:last-child) {
         margin-bottom: 6px;
       }
     }
   }
 }
+
 .fullPageContainer {
   width: 100%;
   height: 100%;
   transition: all linear 0.5s;
 }
+
 .section {
   width: 100%;
   height: 100%;