瀏覽代碼

优化界面只有一张图或者视频或其他元素的时候隐藏左右箭头还有小圆点

shaogen1995 3 年之前
父節點
當前提交
bcadd211e8
共有 1 個文件被更改,包括 23 次插入9 次删除
  1. 23 9
      src/views/Home.vue

+ 23 - 9
src/views/Home.vue

@@ -13,10 +13,10 @@
     <div
       class="content"
       v-if="fixIcon.length > 0"
-      :style="{ height: isMobile ? '100%' : '80%' }"
+      :class="{ isMobileCon: isMobile }"
     >
       <div
-        v-if="!isMobile"
+        v-if="!isMobile && lengthShow"
         @click="slideto('slidePrev')"
         class="swiper-button-prev"
       ></div>
@@ -48,10 +48,14 @@
             ></iframe>
           </div>
         </swiper-slide>
-        <div class="swiper-pagination" slot="pagination"></div>
+        <div
+          class="swiper-pagination"
+          slot="pagination"
+          v-show="lengthShow"
+        ></div>
       </swiper>
       <div
-        v-if="!isMobile"
+        v-if="!isMobile && lengthShow"
         @click="slideto('slideNext')"
         class="swiper-button-next"
       ></div>
@@ -104,7 +108,9 @@ export default {
   name: "Home",
   data() {
     return {
-      loadAuto: false,
+      lengthShow: false,
+      //  看看是不是只有一张图,一个视频或irm,只有一张图的时候隐藏左右按钮和小圆点
+      // loadAuto: false,
       audio: "",
       m: this.$route.query.m,
       id: this.$route.query.id,
@@ -133,6 +139,11 @@ export default {
   },
   watch: {
     active(newVal) {
+      // 判断是否只有一张图片或者视频,ifrm   lengthShow
+      let tempType = this.data[newVal];
+      console.log(tempType);
+      if (tempType && tempType.length && tempType.length > 1) this.lengthShow = true;
+      else this.lengthShow = false;
       if (!newVal) {
         return;
       }
@@ -165,8 +176,8 @@ export default {
   },
   methods: {
     // 音频播放完毕
-    overAudio(){
-      console.log('播放声音完毕');
+    overAudio() {
+      console.log("播放声音完毕");
       this.audioAc(false);
     },
     // 音频的状态
@@ -318,6 +329,9 @@ export default {
       }
     }
   }
+  .isMobileCon {
+    height: calc(100vh - 90px);
+  }
 
   .iconarr {
     list-style: none;
@@ -411,7 +425,7 @@ export default {
           }
           iframe {
             width: 100%;
-            height: 100vh;
+            height: calc(100vh - 90px);
           }
         }
       }
@@ -448,7 +462,7 @@ export default {
           iframe {
             width: 100%;
             max-width: unset;
-            height: 100vh;
+            height: calc(100vh - 90px);
           }
         }
       }