swiper那个插件一开始用的时候就没有调试好，总有bug，既然只要部署在一体机上，就用触屏操作系统自带的swipe功能好了。

src/components/UIGather/mobile/list.vue

@@ -13,45 +13,41 @@
     :class="{ barshow: isShowScenesList }"
   >
     <div class="top-con">
-      <template v-if="isLargeScreen">
-        <div
-          class="swiper-container"
-          id="swSecondary"
-          :style="`width:${isLargeScreen ? '100%' : Math.min(secondaryW, innerW) + 'px'};
-        padding:${secondaryW > innerW ? '0 15px' : '0'}`"
-          v-if="secondaryList.length > 1"
-        >
-          <ul class="swiper-wrapper">
-            <li
-              class="swiper-slide"
-              @click="tabSecondary(item)"
-              :class="{
-                active: currentSecondary.id == item.id,
-                loopspan:
-                  fixTitle(item.name).length > spanlength &&
-                  currentSecondary.id == item.id,
-              }"
-              v-for="(item, i) in secondaryList"
-              :key="i"
-            >
-              <span v-if="currentSecondary.id == item.id">{{
-                fixTitle(item.name)
-              }}</span>
-              <span v-else>{{
-                fixTitle(item.name).length > spanlength
-                  ? fixTitle(item.name).slice(0, spanlength)
-                  : fixTitle(item.name)
-              }}</span>
-            </li>
-          </ul>
-        </div>
-      </template>
+      <div
+        class="swiper-container"
+        id="swSecondary"
+        :style="`padding:${secondaryW > innerW ? '0 15px' : '0'}`"
+        v-if="secondaryList.length > 1"
+      >
+        <ul class="swiper-wrapper">
+          <li
+            class="swiper-slide"
+            @click="tabSecondary(item)"
+            :class="{
+              active: currentSecondary.id == item.id,
+              loopspan:
+                fixTitle(item.name).length > spanlength &&
+                currentSecondary.id == item.id,
+            }"
+            v-for="(item, i) in secondaryList"
+            :key="i"
+          >
+            <span v-if="currentSecondary.id == item.id">{{
+              fixTitle(item.name)
+            }}</span>
+            <span v-else>{{
+              fixTitle(item.name).length > spanlength
+                ? fixTitle(item.name).slice(0, spanlength)
+                : fixTitle(item.name)
+            }}</span>
+          </li>
+        </ul>
+      </div>
 
       <div
         class="swiper-container"
         id="swScenes"
-        :style="`width:${isLargeScreen ? '100%' : Math.min(scenesListW, innerW) + 'px'};
-      padding:${scenesListW > innerW ? '0 15px' : '0'}`"
+        :style="`padding:${scenesListW > innerW ? '0 15px' : '0'}`"
         v-if="currentScenesList.length > 0"
       >
         <ul class="swiper-wrapper">
@@ -65,8 +61,9 @@
                 currentScene.id == item.id,
             }"
             :style="{ backgroundImage: `url(${item.icon})` }"
-            v-for="(item, ) in currentScenesList"
+            v-for="(item, idx) in currentScenesList"
             :key="item.sceneCode"
+            :id="`scene-${idx}`"
           >
             <i
               class="iconfont"
@@ -87,46 +84,12 @@
           </li>
         </ul>
       </div>
-
-      <template v-if="!isLargeScreen">
-        <div
-          class="swiper-container"
-          id="swSecondary"
-          :style="`width:${Math.min(secondaryW, innerW)}px;
-        padding:${secondaryW > innerW ? '0 15px' : '0'}`"
-          v-if="secondaryList.length > 1"
-        >
-          <ul class="swiper-wrapper">
-            <li
-              class="swiper-slide"
-              @click="tabSecondary(item)"
-              :class="{
-                active: currentSecondary.id == item.id,
-                loopspan:
-                  fixTitle(item.name).length > spanlength &&
-                  currentSecondary.id == item.id,
-              }"
-              v-for="(item, i) in secondaryList"
-              :key="i"
-            >
-              <span v-if="currentSecondary.id == item.id">{{
-                fixTitle(item.name)
-              }}</span>
-              <span v-else>{{
-                fixTitle(item.name).length > spanlength
-                  ? fixTitle(item.name).slice(0, spanlength)
-                  : fixTitle(item.name)
-              }}</span>
-            </li>
-          </ul>
-        </div>
-      </template>
     </div>
 
     <div
       class="group-level-1 swiper-container"
       id="swcatalogRoot"
-      :style="`width:${isLargeScreen ? '100%' : Math.min(catalogRootW, innerW) + 'px'}; padding:${catalogRootW > innerW ? '0 15px' : '0'}; bottom: ${rootListBottom}`"
+      :style="`padding:${catalogRootW > innerW ? '0 15px' : '0'}; bottom: ${rootListBottom}`"
       v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1"
     >
       <ul class="swiper-wrapper" v-show="metadata.catalogRoot.length > 1">
@@ -172,15 +135,13 @@ const metadata = computed(() => store.getters["scene/metadata"]);
 const scenes = computed(() => store.getters["scene/list"]);
 const currentScene = computed(() => store.getters["scene/currentScene"]);
 
-const isLargeScreen = window.innerWidth > 750
-
-let sceneListSwiper = null
 watch(currentScene, (newV, oldV) => {
   setTimeout(() => {
     const idx = currentScenesList.value.findIndex((item) => {
       return item.sceneCode === newV.sceneCode
     })
-    sceneListSwiper.slideTo(idx)
+    const activeSceneEl = document.getElementById(`scene-${idx}`)
+    activeSceneEl.scrollIntoView()
   }, 300)
 })
 
@@ -258,46 +219,9 @@ const rootListBottom = computed(() => {
   }
 })
 
-const loadList = () => {
-  nextTick(() => {
-    const spaceBetween = {
-      'swcatalogRoot': window.innerWidth > 750 ? 100 : 10,
-      'swSecondary': window.innerWidth > 750 ? 200 : 10,
-      'swScenes': window.innerWidth > 750 ? 36 : 10,
-    }
-    let t = setTimeout(() => {
-      clearTimeout(t);
-      ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach((item) => {
-        let tmp = new Swiper(item, {
-          slidesPerView: "auto",
-          centeredSlides: true,
-          spaceBetween: spaceBetween[item.substring(1)],
-          centerInsufficientSlides: true,
-          centeredSlidesBounds: true,
-          freeMode: true,
-          observer: true,
-          observeParents: true,
-        });
-        if (item == "#swScenes") {
-          sceneListSwiper = tmp
-        }
-      });
-    }, 100);
-  });
-};
-
-watch(currentSecondary, () => {
-  loadList();
-});
-
-watch(currentScenesList, () => {
-  loadList();
-});
-
 onMounted(() => {
   useApp().then(async (app) => {
     show.value = true;
-    loadList();
   });
 });
 </script>
@@ -322,7 +246,6 @@ onMounted(() => {
     width: 100%;
     position: relative;
     margin: 0 auto;
-
     > ul {
       > li {
         white-space: nowrap;
@@ -363,30 +286,30 @@ onMounted(() => {
   }
 
   #swcatalogRoot {
-    padding: 0 15px;
-    @media only screen and (min-width: 750px){
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      padding: 0 0.625vw;
-    }
+    width: '100%';
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0 0.625vw;
     > ul {
+      overflow: auto;
+      width: fit-content;
+      max-width: 100%;
+      margin-left: auto;
+      margin-right: auto;
       > li {
-        width: 104px;
-        background: rgba(0, 0, 0, 0.5);
-        border-radius: 4px;
-        padding: 3px 10px;
-        border: 1px solid rgba(255, 255, 255, 0.5);
         box-sizing: border-box;
         overflow: hidden;
-        @media only screen and (min-width: 750px){
-          padding: 0.512vw 0.25vw;
-          width: 10.5vw;
-          background: rgba(0, 0, 0, 0.8);
-          font-size: 0.938vw;
-          border: 1px solid rgba(47, 133, 226, 0.8);
-          border-radius: initial;
-          color: #C6C6C6;
+        padding: 0.512vw 0.25vw;
+        width: 10.5vw;
+        background: rgba(0, 0, 0, 0.8);
+        font-size: 0.938vw;
+        border: 1px solid rgba(47, 133, 226, 0.8);
+        border-radius: initial;
+        color: #C6C6C6;
+        margin-right: 100px;
+        &:last-of-type {
+          margin-right: initial;
         }
         > span {
           width: 100%;
@@ -407,29 +330,30 @@ onMounted(() => {
   }
   
   #swSecondary {
-    margin: 10px auto 20px;
-    padding: 0 15px;
-    @media only screen and (min-width: 750px){
-      margin: 0.512vw auto 1.024vw;
-      padding: 0 0.781vw;
-    }
+    margin: 0.512vw auto 1.024vw;
+    padding: 0 0.781vw;
+    width: 100%;
     > ul {
+      overflow: auto;
+      width: fit-content;
+      max-width: 100%;
+      margin-left: auto;
+      margin-right: auto;
       > li {
-        width: 84px;
         box-sizing: border-box;
         overflow: hidden;
         padding-bottom: 6px;
-        @media only screen and (min-width: 750px){
-          width: 4.6875vw;
+        width: 4.6875vw;
+        margin-right: 200px;
+        &:last-of-type {
+          margin-right: initial;
         }
         > span {
           width: 100%;
           word-break: keep-all;
-          @media only screen and (min-width: 750px){
-            letter-spacing: 0.156vw;
-            font-size: 0.833vw;
-            font-family: kaiti;
-          }
+          letter-spacing: 0.156vw;
+          font-size: 0.833vw;
+          font-family: kaiti;
         }
 
         &.active {
@@ -454,18 +378,24 @@ onMounted(() => {
 
   #swScenes {
     // padding: 0 15px;
+    width: 100%;
     > ul {
+      overflow: auto;
+      width: fit-content;
+      max-width: 100%;
+      margin-left: auto;
+      margin-right: auto;
       > li {
         cursor: pointer;
-        width: 122px;
-        height: 82px;
         border: 1px solid transparent;
         background-size: cover;
         position: relative;
         overflow: hidden;
-        @media only screen and (min-width: 750px){
-          width: 6.56vw;
-          height: 4.74vw;
+        width: 6.56vw;
+        height: 4.74vw;
+        margin-right: 36px;
+        &:last-of-type {
+          margin-right: initial;
         }
         .iconfont {
           position: absolute;