update1410

package.json

@@ -14,9 +14,9 @@
     "core-js": "^3.8.2",
     "element-ui": "^2.15.1",
     "photoswipe": "^4.1.3",
-    "swiper": "^6.5.6",
     "v-viewer": "^1.5.1",
     "video.js": "^7.11.8",
+    "swiper": "^5.3.8",
     "vue": "^2.6.12",
     "vue-awesome-swiper": "^4.1.1",
     "vue-cropperjs": "^4.2.0",

src/framework/show/component/swp.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="clip-scroller" ref="sw"  v-swiper:mySwiper="swiperOptions">
+      <ul class="pic-list swiper-wrapper"  v-if="scenes.length > 0" ref="pic">
+        <li class="swiper-slide" :title="item.sceneTitle" @click="handleVR(item)" v-for="(item, i) in scenes" :key="i">
+          <div :class="{ active: selected.sceneCode == item.sceneCode }">
+            <img :src="item.icon + `?${Math.random()}`" alt="" />
+            <i class="iconfont iconedit_type_3d" :class="{ iconedit_type_panorama: item.type !== '4dkk' }"></i>
+            <rollName :offset="20" :active="selected.sceneCode == item.sceneCode" class="pic-name" :myref="'subw' + item.id" :name="item.sceneTitle" />
+          </div>
+        </li>
+      </ul>
+    </div>
+</template>
+
+<script>
+export default {
+  props:[]
+}
+</script>

src/framework/show/list.vue

@@ -2,9 +2,9 @@
   <div class="list">
     <div class="l-con" :class="showList ? 'active' : ''" v-if="!(showInfo.catalogRoot.length == 1 && scenes.length == 1 && showInfo.catalogs.length == 1)">
       <div class="pic-con">
-        <div class="clip-scroller">
-          <ul class="pic-list" v-if="scenes.length > 0" ref="pic">
-            <li :title="item.sceneTitle" @click="handleVR(item)" v-for="(item, i) in scenes" :key="i">
+        <div class="clip-scroller" ref="sw" v-swiper:mySwiper="swiperOptions" v-if="scenes.length > 0">
+          <ul class="pic-list swiper-wrapper">
+            <li class="swiper-slide" :title="item.sceneTitle" @click="handleVR(item,$event)" v-for="(item, i) in scenes" :key="i">
               <div :class="{ active: selected.sceneCode == item.sceneCode }">
                 <img :src="item.icon + `?${Math.random()}`" alt="" />
                 <i class="iconfont iconedit_type_3d" :class="{ iconedit_type_panorama: item.type !== '4dkk' }"></i>
@@ -14,9 +14,9 @@
           </ul>
         </div>
 
-        <div class="clip-scroller" v-if="childTab.length > 1">
-          <ul class="pp-tap">
-            <li @click="tabtowActive = item" v-for="(item, i) in childTab" :key="i">
+        <div class="clip-scroller"  ref="sw1"  v-swiper:mySwipera="swiperOptions" v-if="childTab.length > 1">
+          <ul class="pp-tap swiper-wrapper">
+            <li class="swiper-slide" @click="tabtowActive = item" v-for="(item, i) in childTab" :key="i">
               <rollName
                 :offset="30"
                 :mgin="20"
@@ -31,9 +31,9 @@
         </div>
       </div>
 
-      <div class="clip-scroller" v-if="showInfo.catalogRoot.length > 0 && showInfo.catalogs.length > 1">
-        <ul class="tap">
-          <li @click="taboneActive = item" :class="{ active: item.id == taboneActive.id }" v-for="(item, i) in showInfo.catalogRoot" :key="i">
+      <div class="clip-scroller" ref="sw2"  v-swiper:mySwiperb="swiperOptions" v-if="showInfo.catalogRoot.length > 0 && showInfo.catalogs.length > 1">
+        <ul class="tap  swiper-wrapper">
+          <li  class="swiper-slide" @click="taboneActive = item" :class="{ active: item.id == taboneActive.id }" v-for="(item, i) in showInfo.catalogRoot" :key="i">
             <rollName
               :offset="30"
               :mgin="20"
@@ -56,12 +56,21 @@ import { mapGetters } from "vuex";
 import config from "@/config";
 import rollName from "@/components/rollName";
 
+import { directive } from "vue-awesome-swiper";
+// import style (<= Swiper 5.x)
+import "swiper/css/swiper.css";
+
+
 let $scroll = null;
 
 export default {
   props: ["select"],
   components: { rollName },
 
+  directives: {
+    swiper: directive,
+  },
+
   data() {
     return {
       taboneActive: { children: [] },
@@ -82,6 +91,21 @@ export default {
     selected() {
       return { ...this.select };
     },
+    swiperOptions() {
+      return {
+        slidesPerView: "auto",
+        // observer:true,
+        // observeParents: true,
+        centeredSlides : true,
+        centerInsufficientSlides: true,
+        centeredSlidesBounds: true,
+        on:{
+          click: function(e){
+            console.log(e);
+          },
+        },
+      };
+    },
   },
 
   methods: {
@@ -90,52 +114,17 @@ export default {
         return this.$refs[ref][0].clientWidth;
       }
     },
-    handleVR(item) {
+    handleVR(item,e=null) {
       history.replaceState(null, null, "".concat(window.location.pathname, "?").concat(`id=${this.showInfo.id}&vr=${item.sceneCode}`));
       this.sceneNum = item.sceneCode;
-      // let idx = this.scenes.findIndex(ii=>ii.sceneCode == item.sceneCode)
-      // this.SlyArr.forEach(tttt=>{
-      //   item.toStart()
-      //     tttt.slideTo(78 * (idx || 0),300)
-      // })
+
+      console.dir(e&& $(e.target));
     },
-    refreshSly(){
-      this.SlyArr.forEach(item=>{
-        // item.toStart()
-        this.$nextTick(() => {
-          item.reload()
-        });
-      })
-     
-    }
+   
   },
 
   mounted() {
-    this.$nextTick(() => {
-      if ($scroll == null) {
-        let eles = $(".clip-scroller");
-        Array.from(eles).forEach((item,i) => {
-          // let frame = new PerfectScrollbar(item, {
-          //   useBothWheelAxes: true,
-          //   suppressScrollY: true,
-          //   wheelSpeed: 0.8,
-          // });
-          // $(item).data("scrollbar", frame);
-          let iii = new Sly($(item),{
-              horizontal: !0,
-              smart: !0,
-              mouseDragging: !0,
-              touchDragging: !0,
-              speed: 0,
-              dragHandle: !0,
-              dynamicHandle: !0,
-              clickBar: !0,
-              activateOn: null
-          }).init()
-          this.SlyArr.push(iii)
-        });
-      }
-    });
+    
   },
 
   watch: {
@@ -167,7 +156,6 @@ export default {
           });
           this.scenes = arr.sort((a, b) => a.weight - b.weight);
         }
-        this.refreshSly()
       },
     },
 
@@ -300,14 +288,16 @@ export default {
     .pic-con {
       background: rgba(0, 0, 0, 0.5);
       border-radius: 4px;
+      padding: 0 20px;
+
     }
 
-    .clip-scroller {
+    .clip-scroller{
       position: relative;
       border-radius: 4px;
     }
     ul {
-      display: inline-block;
+      // display: inline-block;
       white-space: nowrap;
       position: relative;
       li {
@@ -318,14 +308,18 @@ export default {
 
     .pp-tap {
       padding: 0 0 16px;
+      > li {
+        width: 150px;
+      }
     }
     .tap {
       padding: 16px 0;
 
       > li {
         position: relative;
+        width: 116px;
         .btn{
-          width: 116px;
+          width: 100%;
           padding: 0;
         }
 
@@ -348,12 +342,14 @@ export default {
       }
     }
     .pic-list {
-      padding: 12px 20px;
+      padding: 12px 0;
       > li {
         cursor: pointer;
+        width: 72px;
+        height: 72px;
         > div {
-          width: 72px;
-          height: 72px;
+          width: 100%;
+          height: 100%;
           border: 2px solid #ffffff;
           opacity: 1;
           border-radius: 4px;
@@ -371,6 +367,7 @@ export default {
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            z-index: -1;
           }
           .iconfont {
             position: absolute;

src/framework/showMobile/list.vue

@@ -2,27 +2,36 @@
   <div class="list">
      <div class="l-con" :class="showList?'active':''"  v-if="!(showInfo.catalogRoot.length == 1 && scenes.length == 1 && showInfo.catalogs.length == 1)">
       <div class="pic-con">
-        <ul class="pic-list" v-if="scenes.length>0">
-          <li @click="handleVR(item)" v-for="(item,i) in scenes" :key="i">
-            <div :class="{active:selected.sceneCode==item.sceneCode}">
-              <img :src="item.icon+`?${Math.random()}`" alt="" />
-              <i class="iconfont" :class="item.type!='4dkk'?'iconedit_type_panorama':'iconedit_type_3d'"></i>
-              <rollName :offset="20" :active="selected.sceneCode==item.sceneCode" class="pic-name" :myref="'subw'+item.id" :name="item.sceneTitle"/>
-            </div>
-          </li>
-        </ul>
-        
-        <ul class="tap " v-if="childTab.length > 1" >
-          <li  @click="tabtowActive = item" v-for="(item,i) in childTab" :key="i">
+
+        <div ref="sw" v-swiper:mySwiper="swiperOptions"  v-if="scenes.length>0">
+          <ul class="pic-list swiper-wrapper">
+            <li class="swiper-slide" @click="handleVR(item)" v-for="(item,i) in scenes" :key="i">
+              <div :class="{active:selected.sceneCode==item.sceneCode}">
+                <img :src="item.icon+`?${Math.random()}`" alt="" />
+                <i class="iconfont" :class="item.type!='4dkk'?'iconedit_type_panorama':'iconedit_type_3d'"></i>
+                <rollName :offset="20" :active="selected.sceneCode==item.sceneCode" class="pic-name" :myref="'subw'+item.id" :name="item.sceneTitle"/>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <div ref="sw1"  v-swiper:mySwipera="swiperOptions" v-if="childTab.length > 1">
+          
+        <ul class="tap swiper-wrapper"  >
+          <li class="swiper-slide" @click="tabtowActive = item" v-for="(item,i) in childTab" :key="i">
               <rollName :offset="30" :mgin="20" :active="item.id == tabtowActive.id" class="btn pic-rect" :class="{active:item.id == tabtowActive.id}" :myref="'ww'+item.id" :name="item.name"/>
           </li>
         </ul>
+        </div>
       </div>
-       <ul class="tap" v-if="showInfo.catalogRoot.length > 1">
-          <li @click="taboneActive = item" :class="{ active: item.id == taboneActive.id }" v-for="(item,i) in showInfo.catalogRoot" :key="i">
+      
+      <div class="clip-scroller" ref="sw2"  v-swiper:mySwiperb="swiperOptions" v-if="showInfo.catalogRoot.length > 0 && showInfo.catalogs.length > 1">
+         <ul class="tap swiper-wrapper" v-if="showInfo.catalogRoot.length > 1">
+          <li class="swiper-slide" @click="taboneActive = item" :class="{ active: item.id == taboneActive.id }" v-for="(item,i) in showInfo.catalogRoot" :key="i">
               <rollName :offset="30" :mgin="20" :active="item.id == taboneActive.id" class="btn rect" :class="{active:item.id == taboneActive.id}" :myref="'zw'+item.id" :name="item.name"/>
           </li>
         </ul>
+      </div>
     </div>
     <div v-if="selected.type=='4dkk' && (isShowDL || (currentActive!='2d'&& currentActive!='3d' && mapvisit == 0))" class="menu">
       <div class="menucon" :class="{shouqi:shouqi}">
@@ -62,11 +71,16 @@
 import { mapGetters } from "vuex";
 import config from "@/config";
 import rollName from "@/components/rollName";
+import { directive } from "vue-awesome-swiper";
+// import style (<= Swiper 5.x)
+import "swiper/css/swiper.css";
 
 export default {
   props:['select','mapvisit'],
   components:{rollName},
-  
+  directives: {
+    swiper: directive,
+  },
   data(){
     let menu = [{
       id:'pano',
@@ -107,6 +121,16 @@ export default {
       ...mapGetters({
         showInfo: "showInfo"
       }),
+      swiperOptions() {
+        return {
+          slidesPerView: "auto",
+          // observer:true,
+          // observeParents: true,
+          centeredSlides : true,
+          centerInsufficientSlides: true,
+          centeredSlidesBounds: true
+        };
+      },
       selected(){
         return {...this.select}
       }
@@ -382,9 +406,10 @@ export default {
     .pic-con{
       background: rgba(0, 0, 0, 0.5);
       border-radius: 4px;
+      padding: 0 10px;
+
     }
     ul{
-      padding-left: 10px!important;
       align-items: center;
       display: flex;
       li{
@@ -394,15 +419,16 @@ export default {
       }
     }
     .tap{
-      padding: 12px 10px;
-      overflow-x: auto;
+      padding: 12px 0;
       &::-webkit-scrollbar{
         display: none;
       }
        > li {
         position: relative;
+        width: 88px;
+
         .btn{
-          width: 88px;
+          width: 100%;
           padding: 0;
         }
         &.active {
@@ -425,15 +451,16 @@ export default {
     }
     .pic-list{
       padding: 12px 0;
-      overflow-x: auto;
       &::-webkit-scrollbar {
         display: none;
       }
       >li{
         cursor: pointer;
+        width: 72px;
+        height: 72px;
         >div{
-          width: 72px;
-          height: 72px;
+          width: 100%;
+          height: 100%;
           border: 2px solid #FFFFFF;
           opacity: 1;
           border-radius: 4px;