提交

1

src/views/teamDetail/componentCourse/studentWork.vue

@@ -112,15 +112,25 @@
       width="940px"
       append-to-body
       :visible.sync="workVisible"
+
     >
       <!-- activeUrl -->
-      <div class="sliderWrap" v-if="workVisible">
+      <div class="sliderWrap">
         <div class="swiperWrap">
-          <swiper ref="mySwiper" :options="swiperOptions" v-if="activeRow">
+          <swiper
+          v-if="activeRow"
+            ref="mySwiper"
+            :options="swiperOptions"
+            :auto-update="true"
+            :auto-destroy="false"
+            :delete-instance-on-destroy="true"
+            :cleanup-styles-on-destroy="true"
+          >
             <swiper-slide
               v-for="(item, index) in activeRow.urlList"
               :key="index"
             >
+              <!-- v-if="activeIndex == index" -->
               <div class="videoWrap">
                 <video
                   style="width: 480px"
@@ -200,8 +210,6 @@
 </template>
 <script>
 import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
-
-// import style (>= Swiper 6.x)
 import "swiper/swiper-bundle.css";
 import pagination from "@/components/Pagination/index";
 import {
@@ -241,8 +249,11 @@ export default {
       content: null,
       title: null,
       activeRow: null,
+      activeIndex: 0,
       swiperOptions: {
         // autoHeight: true,
+        observer: true, //修改swiper自己或子元素时，自动初始化swiper
+        observeParents: true, //修改swiper的父元素时，自动初始化swiper
         speed: 300,
         loop: true,
         pagination: ".swiper-pagination",
@@ -251,8 +262,8 @@ export default {
           prevEl: ".swiper-button-prev",
         },
         on: {
-          slideChange: () => {
-            console.log(this.activeRow);
+          slideChange: (val) => {
+            // this.activeIndex = val.realIndex;
           },
         },
 
@@ -333,6 +344,7 @@ export default {
       }).then((res) => {
         if (res.code == 200) {
           this.activeCommit = res.data.rows;
+
           this.workVisible = true;
           // item.up = false
         }
@@ -342,12 +354,15 @@ export default {
       this.activeUrl = "";
     },
     prev(val) {
-
-      this.swiper.slidePrev();
+      this.$nextTick(() => {
+        this.swiper.slidePrev();
+      });
     },
     next(val) {
-      console.log(val)
-      this.swiper.slideNext();
+      this.$nextTick(() => {
+        console.log(this.swiper.slideNext());
+        this.swiper.slideNext();
+      });
     },
     lookReplied(row) {
       // repliedVisible
@@ -385,17 +400,16 @@ export default {
   flex-direction: row;
   height: 100%;
 }
-.videoWrap{
-  min-height:640px;
+.videoWrap {
+  min-height: 640px;
 
-  //  background-color: #efefef;
-   align-items: center;
-   display: flex;
-   flex-direction: row;
+  background-color: #efefef;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
 }
 
 .swiper-wrapper {
-
 }
 .sliderWrap {
   width: 100%;