重构swiper Nat

packages/qjkankan-view/src/components/UIGather/list.vue

@@ -63,7 +63,7 @@
         <ul class="swiper-wrapper">
           <li
             class="swiper-slide"
-            @click="tabSecondary(item)"
+            @click="tabSecondary(item, i)"
             :class="{
               active: currentSecondary.id == item.id,
               loopspan:
@@ -120,7 +120,15 @@
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted, nextTick, unref } from "vue";
+import {
+  ref,
+  watch,
+  computed,
+  onMounted,
+  nextTick,
+  unref,
+  watchEffect,
+} from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
 
@@ -157,7 +165,6 @@ const currentScenesList = computed(
 );
 
 const show = ref(false);
-const isInitSwiper = ref(false);
 
 const swidth = ref({
   swcatalogRoot: 104,
@@ -182,14 +189,18 @@ const tabCurrentScene = (data) => {
   console.log("tabCurrentScene", data.id, currentScene.value.id);
   if (data.id !== currentScene.value.id) {
     store.commit("scene/setCurrentScene", data);
+    scenesSwiperFocus();
   } else {
     console.log("重复点击当前导航");
     // window.alert("alert-test-->重复点击当前导航");
   }
 };
 
-const tabSecondary = (data) => {
+const tabSecondary = (data, index) => {
   store.commit("scene/setCurrentSecondary", data);
+  // if (window.sencordNatSwiper) {
+  //   window.sencordNatSwiper.slideTo(index);
+  // }
 };
 
 const tabRoot = (data) => {
@@ -206,31 +217,67 @@ const fixTitle = (name) => {
   }
   return name;
 };
+const swiperOptions = {
+  slidesPerView: "auto",
+  centeredSlides: true,
+  spaceBetween: 10,
+  centerInsufficientSlides: true,
+  centeredSlidesBounds: true,
+  freeMode: {
+    enabled: true,
+    sticky: false,
+  },
+};
+
+// const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
-const loadList = () => {
+const initMainSwiper = () => {
   nextTick(() => {
-    if (!unref(isInitSwiper)) {
-      console.log("init-swiper");
-      let t = setTimeout(() => {
-        clearTimeout(t);
-        isInitSwiper.value = true;
-        ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach(
-          (item, index) => {
-            window[`natSwiper${index}`] = new Swiper(item, {
-              slidesPerView: "auto",
-              centeredSlides: true,
-              spaceBetween: 10,
-              // observer: true,
-              centerInsufficientSlides: true,
-              centeredSlidesBounds: true,
-              freeMode: {
-                enabled: true,
-                sticky: false,
-              },
-            });
-          }
-        );
-      }, 100);
+    if (window.mainNatSwiper) {
+      window.mainNatSwiper = null;
+    }
+    window.mainNatSwiper = new Swiper("#swcatalogRoot", swiperOptions);
+  });
+};
+const initsencordNatSwiper = () => {
+  nextTick(() => {
+    if (window.sencordNatSwiper) {
+      window.sencordNatSwiper = null;
+    }
+    window.sencordNatSwiper = new Swiper("#swSecondary", swiperOptions);
+  });
+};
+const initScenesSwiper = () => {
+  nextTick(() => {
+    if (window.scenesNatSwiper) {
+      window.scenesNatSwiper = null;
+    }
+    window.scenesNatSwiper = new Swiper("#swScenes", {
+      ...swiperOptions,
+    });
+    scenesSwiperFocus();
+  });
+};
+
+const scenesSwiperFocus = () => {
+  const sceneIndex = Array.from(currentScenesList.value).findIndex(
+    (item) => item.id === currentScene.value.id
+  );
+  if (window.scenesNatSwiper) {
+    const index = sceneIndex < 0 ? 0 : sceneIndex;
+    console.warn("scenesSwiperFocus", index);
+    window.scenesNatSwiper.slideTo(index);
+  }
+};
+
+const sencordNatSwiperFocus = () => {
+  nextTick(() => {
+    const current = Array.from(secondaryList.value).findIndex(
+      (item) => item.id === currentSecondary.value.id
+    );
+    if (window.sencordNatSwiper) {
+      console.warn("current-sencordNatSwiper-index", current);
+      window.sencordNatSwiper.slideTo(current);
     }
   });
 };
@@ -239,9 +286,30 @@ onMounted(() => {
   useApp().then(async (app) => {
     show.value = true;
   });
-  watch([currentSecondary, currentScenesList], () => {
-    // debugger;
-    loadList();
+  watchEffect(() => {
+    if (
+      metadata.value.catalogRoot &&
+      unref(metadata.value.catalogRoot).length > 0
+    ) {
+      initMainSwiper();
+    }
+  });
+
+  watch(currentSecondary, () => {
+    if (unref(secondaryList).length > 1) {
+      initsencordNatSwiper();
+      sencordNatSwiperFocus();
+    } else {
+      if (window.sencordNatSwiper) {
+        console.warn("destroy-sencordNatSwiper");
+        window.sencordNatSwiper.destroy(true);
+        window.sencordNatSwiper = null;
+      }
+    }
+  });
+
+  watch(currentScenesList, () => {
+    initScenesSwiper();
   });
 });
 </script>

packages/qjkankan-view/src/components/UIGather/mobile/list.vue

@@ -122,7 +122,15 @@
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted, nextTick } from "vue";
+import {
+  ref,
+  unref,
+  watch,
+  watchEffect,
+  computed,
+  onMounted,
+  nextTick,
+} from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
 import { useI18n, getLocale } from "@/i18n";
@@ -179,6 +187,7 @@ const tabCurrentScene = (data) => {
   console.log("tabCurrentScene", data.id, currentScene.value.id);
   if (data.id !== currentScene.value.id) {
     store.commit("scene/setCurrentScene", data);
+    scenesSwiperFocus();
   } else {
     console.log("重复点击当前导航");
     // window.alert("alert-test-->重复点击当前导航");
@@ -204,43 +213,97 @@ const fixTitle = (name) => {
   return name;
 };
 
-const loadList = () => {
-  nextTick(() => {
-    let t = setTimeout(() => {
-      clearTimeout(t);
-      ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach((item, index) => {
-        window[`natSwiper${index}`] = new Swiper(item, {
-          slidesPerView: "auto",
-          centeredSlides: true,
-          spaceBetween: 10,
-          centerInsufficientSlides: true,
-          centeredSlidesBounds: true,
-          freeMode: true,
-          observer: true,
-          observeParents: true,
-        });
-        if (item == "#swScenes") {
-         
-        }
+const swiperOptions = {
+  slidesPerView: "auto",
+  centeredSlides: true,
+  spaceBetween: 10,
+  centerInsufficientSlides: true,
+  centeredSlidesBounds: true,
+  freeMode: {
+    enabled: true,
+    sticky: false,
+  },
+};
+
+// const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
-        // console.log(tmp.slideTo);
-      });
-    }, 100);
+const initMainSwiper = () => {
+  nextTick(() => {
+    if (window.mainNatSwiper) {
+      window.mainNatSwiper = null;
+    }
+    window.mainNatSwiper = new Swiper("#swcatalogRoot", swiperOptions);
+  });
+};
+const initsencordNatSwiper = () => {
+  nextTick(() => {
+    if (window.sencordNatSwiper) {
+      window.sencordNatSwiper = null;
+    }
+    window.sencordNatSwiper = new Swiper("#swSecondary", swiperOptions);
+  });
+};
+const initScenesSwiper = () => {
+  nextTick(() => {
+    if (window.scenesNatSwiper) {
+      window.scenesNatSwiper = null;
+    }
+    window.scenesNatSwiper = new Swiper("#swScenes", swiperOptions);
+    scenesSwiperFocus();
   });
 };
 
-watch(currentSecondary, () => {
-  loadList();
-});
+const scenesSwiperFocus = () => {
+  const sceneIndex = Array.from(currentScenesList.value).findIndex(
+    (item) => item.id === currentScene.value.id
+  );
+  if (window.scenesNatSwiper) {
+    const index = sceneIndex < 0 ? 0 : sceneIndex;
+    console.warn("scenesSwiperFocus", index);
+    window.scenesNatSwiper.slideTo(index);
+  }
+};
 
-watch(currentScenesList, () => {
-  loadList();
-});
+const sencordNatSwiperFocus = () => {
+  nextTick(() => {
+    const current = Array.from(secondaryList.value).findIndex(
+      (item) => item.id === currentSecondary.value.id
+    );
+    if (window.sencordNatSwiper) {
+      console.warn("current-sencordNatSwiper-index", current);
+      window.sencordNatSwiper.slideTo(current);
+    }
+  });
+};
 
 onMounted(() => {
   useApp().then(async (app) => {
     show.value = true;
-    loadList();
+  });
+  watchEffect(() => {
+    if (
+      metadata.value.catalogRoot &&
+      unref(metadata.value.catalogRoot).length > 0
+    ) {
+      initMainSwiper();
+    }
+  });
+
+  watch(currentSecondary, () => {
+    if (unref(secondaryList).length > 1) {
+      initsencordNatSwiper();
+      sencordNatSwiperFocus();
+    } else {
+      if (window.sencordNatSwiper) {
+        console.warn("destroy-sencordNatSwiper");
+        window.sencordNatSwiper.destroy(true);
+        window.sencordNatSwiper = null;
+      }
+    }
+  });
+
+  watch(currentScenesList, () => {
+    initScenesSwiper();
   });
 });
 </script>