up

src/views/Home.vue

@@ -20,11 +20,12 @@
         @click="slideto('slidePrev')"
         class="swiper-button-prev"
       ></div>
-      <div class="mb-intro" v-if="active === 'title' && isMobile">
+      <div class="mb-intro" v-show="active === 'title' && isMobile">
         <p v-html="data.title"></p>
         <p v-html="data.content"></p>
+        <p v-html="data.imagesDesc[myInd]" v-if="data.imagesDesc&&data.imagesDesc[myInd]"></p>
       </div>
-      <swiper v-else class="warpper" ref="mySwiper" :options="swiperOptions">
+      <swiper v-show="active !== 'title'" class="warpper" ref="mySwiper" :options="swiperOptions">
         <swiper-slide v-for="(item, i) in data[active]" :key="i">
           <div class="slide">
             <img
@@ -42,7 +43,7 @@
             ></video>
             <iframe
               @click="colseParent(item)"
-              v-else
+              v-else-if="active === 'model' || active === 'iframe'"
               :src="fixUrl(item)"
               frameborder="0"
             ></iframe>
@@ -78,6 +79,7 @@
     >
       <h3 v-html="data.title"></h3>
       <p v-html="data.content"></p>
+      <p v-html="data.imagesDesc[myInd]" v-if="data.imagesDesc&&data.imagesDesc[myInd]"></p>
     </div>
   </div>
 </template>
@@ -108,6 +110,8 @@ export default {
   name: "Home",
   data() {
     return {
+      // 图片描述的索引
+      myInd: 0,
       lengthShow: false,
       //  看看是不是只有一张图，一个视频或irm，只有一张图的时候隐藏左右按钮和小圆点
       // loadAuto: false,
@@ -122,6 +126,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,
@@ -131,6 +142,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,
@@ -139,9 +157,12 @@ export default {
   },
   watch: {
     active(newVal) {
+      if (newVal == "images") this.myInd = 0;
+
       // 判断是否只有一张图片或者视频，ifrm   lengthShow
       let tempType = this.data[newVal];
-      if (tempType && tempType.length && tempType.length > 1) this.lengthShow = true;
+      if (tempType && tempType.length && tempType.length > 1)
+        this.lengthShow = true;
       else this.lengthShow = false;
       if (!newVal) {
         return;