Pārlūkot izejas kodu

Merge branch 'local' of http://192.168.0.115:3000/chenzhiguang/hotspot into local

tremble 3 gadi atpakaļ
vecāks
revīzija
3f91273c18
1 mainītis faili ar 36 papildinājumiem un 5 dzēšanām
  1. 36 5
      src/views/Home.vue

+ 36 - 5
src/views/Home.vue

@@ -38,7 +38,6 @@
               v-else-if="active === 'video'"
               :src="fixUrl(item.url)"
               controls
-              autoplay
             ></video>
             <iframe
               @click="colseParent(item)"
@@ -99,6 +98,7 @@ export default {
   name: "Home",
   data() {
     return {
+      myInd: 0,
       loadAuto: false,
       audio: "",
       m: this.$route.query.m,
@@ -111,6 +111,13 @@ export default {
               el: ".swiper-pagination",
               clickable: true,
             },
+            on: {
+              slideChangeTransitionEnd: () => {
+                let swiper = this.$refs.mySwiper.$swiper;
+                let activeIndex = swiper.activeIndex;
+                this.myInd = activeIndex;
+              },
+            },
           }
         : {
             slidesPerView: 3,
@@ -120,6 +127,13 @@ export default {
               el: ".swiper-pagination",
               clickable: true,
             },
+            on: {
+              slideChangeTransitionEnd: () => {
+                let swiper = this.$refs.mySwiper.$swiper;
+                let activeIndex = swiper.activeIndex;
+                this.myInd = activeIndex;
+              },
+            },
           },
       data: {},
       iconArr,
@@ -127,6 +141,23 @@ export default {
     };
   },
   watch: {
+    myInd: {
+      handler(val) {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            let domAll = document.querySelectorAll("video");
+            if (domAll && domAll.length && domAll.length > 0) {
+              domAll.forEach((v, i) => {
+                if (i === val) v.play();
+                else v.pause();
+              });
+            }
+          }, 100);
+        });
+      },
+      immediate: true,
+    },
+
     active(newVal) {
       if (!newVal) {
         return;
@@ -208,7 +239,7 @@ export default {
       }
     },
     fixUrl(item) {
-      return item
+      return item;
     },
     slideto(action) {
       this.swiper[action]();
@@ -269,7 +300,7 @@ export default {
           border-radius: 14px;
           box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
         }
-       
+
         iframe {
           height: 570px;
           width: 1000px;
@@ -335,7 +366,7 @@ export default {
           iframe {
             max-height: 500px;
           }
-          img{
+          img {
             max-height: 80vh;
             width: auto;
           }
@@ -362,7 +393,7 @@ export default {
             width: 100%;
             border-radius: 0;
           }
-          img{
+          img {
             max-height: 80vh;
             width: auto;
           }