fixed swpier重复引用与第二列不能scroll的问题

packages/qjkankan-editor/src/framework/play/pano/components/list.vue

@@ -54,7 +54,7 @@
 
       <div
         class="swiper-container"
-        :style="`width:${secondaryW}px`"
+        :style="`width:${Math.min(secondaryW, innerW)}px`"
         id="swSecondary"
         ref="sw1"
         v-swiper:mySwipera="swiperOptions"
@@ -204,7 +204,10 @@ export default {
         centeredSlides: true,
         centerInsufficientSlides: true,
         centeredSlidesBounds: true,
-        freeMode: true,
+        freeMode: {
+          enabled: true,
+          sticky: false,
+        },
       };
     },
   },

packages/qjkankan-editor/src/framework/show/list.vue

@@ -169,7 +169,10 @@ export default {
         centeredSlides: true,
         centerInsufficientSlides: true,
         centeredSlidesBounds: true,
-        freeMode: true,
+        freeMode: {
+          enabled: true,
+          sticky: false,
+        },
       };
     },
   },

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

@@ -12,17 +12,10 @@
     "
     :class="{ barshow: isShowScenesList }"
   >
-    <div
-      class="top-con"
-      :style="`width:${
-        Math.max(scenesListW, secondaryW) > 1150
-          ? '100%'
-          : Math.max(scenesListW, secondaryW) + 120 + 'px'
-      }`"
-    >
+    <div class="top-con">
       <div
-        class="swiper-container"
-        :style="`width:${scenesListW > 1150 ? '100%' : scenesListW + 'px'}`"
+        class="swiper-container swiper1"
+        :style="`width:100%`"
         id="swScenes"
         v-if="currentScenesList.length > 0"
       >
@@ -61,11 +54,12 @@
       </div>
 
       <div
-        class="swiper-container"
+        class="swiper-container swiper2"
         id="swSecondary"
-        :style="`width:${secondaryW}px`"
+        :style="`width:${clamp(secondaryW, 0, 1150)}px`"
         v-if="secondaryList.length > 1"
       >
+        <!-- {{ clamp(secondaryW, 0, 1150) }} -->
         <ul class="swiper-wrapper">
           <li
             class="swiper-slide"
@@ -126,7 +120,7 @@
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted, nextTick } from "vue";
+import { ref, watch, computed, onMounted, nextTick, unref } from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
 
@@ -141,6 +135,10 @@ const metadata = computed(() => store.getters["scene/metadata"]);
 const scenes = computed(() => store.getters["scene/list"]);
 const currentScene = computed(() => store.getters["scene/currentScene"]);
 
+const clamp = computed(
+  () => (num, min, max) => Math.min(Math.max(num, min), max)
+);
+
 const currentCatalogRoot = computed(
   () => store.getters["scene/currentCatalogRoot"]
 );
@@ -159,6 +157,7 @@ const currentScenesList = computed(
 );
 
 const show = ref(false);
+const isInitSwiper = ref(false);
 
 const swidth = ref({
   swcatalogRoot: 104,
@@ -210,38 +209,38 @@ const fixTitle = (name) => {
 
 const loadList = () => {
   nextTick(() => {
-    let t = setTimeout(() => {
-      clearTimeout(t);
-      ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach((item) => {
-        new Swiper(item, {
-          slidesPerView: "auto",
-          centeredSlides: true,
-          spaceBetween: 10,
-          centerInsufficientSlides: true,
-          centeredSlidesBounds: true,
-          freeMode: true,
-          touchMoveStopPropagation: true,
-          touchStartPreventDefault : true,
-          // slidesPerView : 6,
-          // slidesPerGroup: 10,
-          // resistanceRatio: 0,
-        });
-      });
-    }, 100);
+    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);
+    }
   });
 };
 
-watch(currentSecondary, () => {
-  loadList();
-});
-
-watch(currentScenesList, () => {
-  loadList();
-});
-
 onMounted(() => {
   useApp().then(async (app) => {
     show.value = true;
+  });
+  watch([currentSecondary, currentScenesList], () => {
+    // debugger;
     loadList();
   });
 });

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

@@ -208,8 +208,8 @@ const loadList = () => {
   nextTick(() => {
     let t = setTimeout(() => {
       clearTimeout(t);
-      ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach((item) => {
-        let tmp = new Swiper(item, {
+      ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach((item, index) => {
+        window[`natSwiper${index}`] = new Swiper(item, {
           slidesPerView: "auto",
           centeredSlides: true,
           spaceBetween: 10,
@@ -220,11 +220,7 @@ const loadList = () => {
           observeParents: true,
         });
         if (item == "#swScenes") {
-          setTimeout(() => {
-            if (tmp && "slideTo" in tmp) {
-              // tmp.slideTo(0, 80, false);
-            }
-          }, 0);
+         
         }
 
         // console.log(tmp.slideTo);