pdf

src/components/PdfPreview/view.vue

@@ -26,12 +26,13 @@
         @link-clicked="currentPage = $event">
       </pdf> -->
     </div>
-    <div v-if="totalPages>initNum" class="pdf-footer" >
+    <div v-if="totalPages>initNum" class="pdf-footer pagination-div" >
       <!-- <el-button icon="el-icon-arrow-left" @click="prePage('footer')" :disabled="loadedRatio !== 1"></el-button>
       <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()"  v-if="moreState == 1">加载更多</el-button>
+      <el-button type="text" v-if="moreState == 1"> 加载更多 </el-button>
+      <el-button type="text" v-if="moreState == 2">加载中</el-button>
     </div>
   </div>
 </template>
@@ -64,7 +65,7 @@ export default {
       loadedRatio:0,// 加载进度
       showProgress:true,
       moreState:1,// 1 加载更多 2 加载中 3无数据
-     isscroll:false,
+     isscroll:true,
      pdfpage:0,
     };
   },
@@ -99,7 +100,7 @@ export default {
   },
   methods: {
     loadProgress(e){
-       console.log(e,'loadProgress');
+      //  console.log(e,'loadProgress');
     },
     loadedPageHandle(e){
        console.log(e,'loadedPageHandle');
@@ -107,13 +108,14 @@ export default {
 
     },
     loadPdfHandle(e){
-       console.log(e,'loadPdfHandle');
+      //  console.log(e,'loadPdfHandle');
     },
     clickMore(){
        if(this.totalPages>this.showPages){
           this.showPages++;
+          this.moreState = 2;
        }
-      this.isscroll = true;
+      // this.isscroll = true;
 
     },
     //加载页面
@@ -135,8 +137,7 @@ export default {
               this.showPages =pdf.numPages;
 
             }
-
-
+          
           }).catch((err) =>{
             this.$message.error("加载内容失败,请联系管理员");
           });
@@ -149,12 +150,17 @@ export default {
       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);
-
+        if((outerHeight + scrollTop + 350) >= innerHeight) {
+           if(this.isscroll){
+          this.debounce(this.clickMore(),5000);
       }
+          console.log(this.showPages,this.totalPages)
+            if( this.showPages >= this.totalPages){
+          this.isscroll = false
+        }
+
+        }
+        
     //  console.log(this.pdfpage,'000')
     // console.log(this.totalPages,this.pdfpage)
      if(this.pdfpage >= this.totalPages){
@@ -162,11 +168,7 @@ export default {
         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";
-        // }
+      
   },