案例pdf滚动加载

src/components/PdfPreview/view.vue

@@ -31,7 +31,7 @@
       <span v-if="loadedRatio !== 1" style="margin:0 10px;">0 / 0</span>
       <span v-else style="margin:0 10px;">{{ currentPage }} / {{ pageCount }}</span>
       <el-button @click="nextPage('footer')" :disabled="loadedRatio !== 1" icon="el-icon-arrow-right"></el-button> -->
-      <el-button type="primary" @click="clickMore()">加载更多</el-button>
+      <el-button type="primary" @click="clickMore()"  v-if="moreState == 1">加载更多</el-button>
     </div>
   </div>
 </template>
@@ -63,6 +63,9 @@ export default {
       scale: 100, //放大系数
       loadedRatio:0,// 加载进度
       showProgress:true,
+      moreState:1,// 1 加载更多 2 加载中 3无数据
+     isscroll:false,
+     pdfpage:0,
     };
   },
   mounted() {
@@ -70,6 +73,13 @@ export default {
       if(this.filePath){
         this.loadInitPdf(this.filePath);
       }
+      window.addEventListener(
+      "scroll",
+      this.handleScroll
+    );
+  },
+  beforeDestroy(){
+    window.removeEventListener("scroll",this.handleScroll);
   },
   watch:{
     filePath(newVal){
@@ -89,36 +99,88 @@ export default {
   },
   methods: {
     loadProgress(e){
-      console.log(e,'loadProgress');
+       console.log(e,'loadProgress');
     },
     loadedPageHandle(e){
-      console.log(e,'loadedPageHandle');
+       console.log(e,'loadedPageHandle');
+       this.pdfpage = e;
+
     },
     loadPdfHandle(e){
-      console.log(e,'loadPdfHandle');
+       console.log(e,'loadPdfHandle');
     },
     clickMore(){
        if(this.totalPages>this.showPages){
-           this.showPages++;
+          this.showPages++;
        }
-    },
+      this.isscroll = true;
+     
+    },     
     //加载页面
     loadInitPdf(url) {
+     
       if(url && url.indexOf('.pdf')>-1){
         let loadingTask = pdf.createLoadingTask(url);
         this.src=loadingTask;
+        
         loadingTask.promise.then((pdf) =>{
+           console.log(pdf)
             this.totalPages=pdf.numPages;
+          
+
             if(pdf.numPages>this.initNum){
               this.showPages = this.initNum;
-            }else{
+             
+            } else{
               this.showPages =pdf.numPages;
+            
             }
+            
+            
           }).catch((err) =>{
             this.$message.error("加载内容失败,请联系管理员");
           });
+         
       }
     },
+
+   handleScroll() {
+      let el_anking = document.querySelector('#case-list-content');
+      let innerHeight = document.querySelector('#pdf-perView').clientHeight
+      let outerHeight = document.documentElement.clientHeight
+      let scrollTop = document.documentElement.scrollTop
+     
+        if(this.isscroll){
+          this.showPages++;
+          this.debounce(this.loadInitPdf(),5000);
+          
+      }
+    //  console.log(this.pdfpage,'000')
+    // console.log(this.totalPages,this.pdfpage)
+     if(this.pdfpage >= this.totalPages){
+        this.isscroll = false
+        this.moreState = 3
+        // console.log('hcuewhf')
+     }
+        //  if(scrollTop > 400) {
+        //   document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:242.5px";
+        // } else {
+        //   document.querySelector('#articleAnking').style.cssText = "position: static";
+        // }
+  },
+   
+    
+    debounce(func, wait) {// 非立即执行
+    let timeout;
+    return function () {
+        let context = this;
+        let args = arguments;
+        if (timeout) clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            func.apply(context, args)
+        }, wait);
+    }
+},
     prePage(type) {
       if (this.currentPage > 1) {
         this.currentPage--;