fix:按需加载

src/pages/course-detail/components/HandOut.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="lecture-notesjy">
     <div class="header">
-      <div class="header__name">{{ courseHandoutsData.handoutsName }}</div>
+      <div class="header__name">{{ showId != null ? activeItem.urlName : courseHandoutsData.handoutsName }}</div>
       <el-button
         class="header__btn"
         size="mini"
@@ -13,7 +13,9 @@
     <ul
       class="center"
       v-if="
-        courseHandoutsData.fileList && courseHandoutsData.fileList.length > 0
+        courseHandoutsData.fileList &&
+        courseHandoutsData.fileList.length > 0 &&
+        showId == null
       "
     >
       <li
@@ -44,24 +46,30 @@
             >
           </div>
         </div>
-        <div class="pdf_box" v-show="showId === item.fileId">
-          <pdf
-            class="iframe"
-            :src="$tools.splitImgHost(item.url)"
-            v-for="i in item.pdf"
-            :key="i"
-            :page="i"
-            ref="pdf"
-          ></pdf>
-          <iframe
-            id="printIframe"
-            :src="$tools.splitImgHost(item.url)"
-            frameborder="0"
-            style="display: none"
-          ></iframe>
-        </div>
       </li>
     </ul>
+    <div
+      class="pdf_box"
+      v-else-if="showId != null"
+      v-infinite-scroll="loadscroll"
+      :infinite-scroll-delay="200"
+      :infinite-scroll-distance="50"
+    >
+      <pdf
+        class="iframe"
+        :src="$tools.splitImgHost(activeItem.url)"
+        v-for="i in pdfCounts"
+        :key="i"
+        :page="i"
+        ref="pdf"
+      ></pdf>
+      <iframe
+        id="printIframe"
+        :src="$tools.splitImgHost(activeItem.url)"
+        frameborder="0"
+        style="display: none"
+      ></iframe>
+    </div>
     <p class="no_center" v-else>暂无讲义列表</p>
   </div>
 </template>
@@ -83,6 +91,8 @@ export default {
     return {
       courseHandoutsData: {},
       showId: null, //当前显示pdfID号
+      activeItem: {},
+      pdfCounts: 0,
     };
   },
   watch: {
@@ -153,17 +163,38 @@ export default {
           .courseHandouts(this.goodsData.handoutsId)
           .then((res) => {
             this.courseHandoutsData = res.data || {};
-            if(res.data.fileList &&res.data.fileList.length > 0){
-              this.loadSeePdf(res.data.fileList[0])
+            if (res.data.fileList && res.data.fileList.length > 0) {
+              this.loadSeePdf(res.data.fileList[0]);
             }
           })
           .catch((err) => {});
       }
     },
+
+    loadscroll() {
+      if (!this.pdfCounts && this.activeItem.pdf) {
+        if (this.activeItem.pdf >= 4) {
+          this.pdfCounts = 4;
+        } else {
+          this.pdfCounts = this.activeItem.pdf;
+        }
+      }
+      if (this.pdfCounts < this.activeItem.pdf) {
+        this.pdfCounts++;
+      } else {
+        return;
+      }
+    },
     //点击预览加载
     loadSeePdf(item) {
       if (item.pdf) {
         this.showId = item.fileId;
+        this.activeItem = item;
+        if (item.pdf >= 4) {
+          this.pdfCounts = 4;
+        } else {
+          this.pdfCounts = item.pdf;
+        }
         this.$emit("backSwitchPdfData", item);
         return;
       }
@@ -172,8 +203,14 @@ export default {
       );
       loadingTask.promise
         .then((pdf) => {
-          this.showId = item.fileId;
           item.pdf = pdf.numPages;
+          this.showId = item.fileId;
+          this.activeItem = item;
+          if (item.pdf >= 4) {
+            this.pdfCounts = 4;
+          } else {
+            this.pdfCounts = item.pdf;
+          }
           this.$emit("backSwitchPdfData", item);
         })
         .catch((err) => {});
@@ -222,5 +259,9 @@ export default {
       }
     }
   }
+  .pdf_box {
+    flex: 1;
+    overflow: auto;
+  }
 }
 </style>

src/pages/course-detail/index.vue

@@ -37,14 +37,19 @@
                   ></div>
                   <div
                     v-if="switchPdf.pdf"
-                    :class="!switchBox ? 'smallBox' : 'switchPdf'"
+                    :class="!switchBox ? 'smallBox overStyle' : 'switchPdf'"
                     :style="!switchBox && hideBox ? 'display:none;' : ''"
                   >
-                    <div v-if="switchPdf.pdf && switchPdf.pdf > 0">
+                    <div
+                      v-if="switchPdf.pdf && switchPdf.pdf > 0"
+                      v-infinite-scroll="loadscroll"
+                      :infinite-scroll-delay="200"
+                      :infinite-scroll-distance="50"
+                    >
                       <pdf
                         class="iframe"
                         :src="$tools.splitImgHost(switchPdf.url)"
-                        v-for="i in switchPdf.pdf"
+                        v-for="i in counts"
                         :key="i"
                         :page="i"
                         ref="pdf"
@@ -1252,7 +1257,8 @@ export default {
       switchPdf: {}, //pdf数据
       liveDuration: 0,
       numPages: 0,
-      loadingPage: 0, //当前加载pdf页面数量
+      // loadingPage: 0, //当前加载pdf页面数量
+      counts: 0,
       showPdf: false,
       // 总页数
       pdfPages: 10,
@@ -1704,23 +1710,39 @@ export default {
   methods: {
     ...mapMutations(["getCartCount"]),
     ...mapActions(["getUserInfo"]),
-    switchBoxFunc() {
-      if (this.loadingPage === this.switchPdf.pdf) {
-        this.switchBox = !this.switchBox
+    loadscroll() {
+      if(!this.counts && this.switchPdf.pdf){
+        if(this.switchPdf.pdf >= 4){
+          this.counts = 4
+        }else{
+          this.counts = this.switchPdf.pdf
+        }
+      }
+      if (this.counts < this.switchPdf.pdf) {
+        this.counts++
       } else {
-        this.$message.warning("PDF加载中,请耐心等待");
         return;
       }
     },
+    switchBoxFunc() {
+      // if (this.loadingPage === this.switchPdf.pdf) {
+      this.switchBox = !this.switchBox;
+      // } else {
+      //   this.$message.warning("PDF加载中,请耐心等待");
+      //   return;
+      // }
+    },
     pageLoaded(e) {
-      console.log("pdf页面总数：", this.switchPdf.pdf,"当前已加载总数:", e);
-      if(this.switchPdf.pdf === e){
-        this.$message.success("PDF加载完毕，如出现PDF模糊问题，请尝试重新切换");
-      this.loadingPage = e;
+      console.log("pdf页面总数：", this.switchPdf.pdf, "当前已加载总数:", e);
+      if (this.switchPdf.pdf === e) {
+        this.$message.success("PDF已全部加载，如出现模糊问题，请尝试重新切换");
+        // this.loadingPage = e;
       }
     },
     backSwitchPdfData(item) {
+      this.counts = 0
       this.switchPdf = item;
+      this.loadscroll()
     },
     pauseVideo() {
       let _p = this.player;
@@ -4922,6 +4944,9 @@ export default {
                 transform: scale(0.2);
               }
             }
+            .overStyle{
+              overflow: auto!important;
+            }
             .switch {
               position: absolute;
               right: 22px;
@@ -4960,6 +4985,7 @@ export default {
               width: 810px;
               height: 455px;
               overflow: auto;
+              border: 1px solid #666;
             }
             .video {
               width: 100%;