案例pdf

src/components/PdfPreview/view.vue

@@ -31,17 +31,21 @@
       <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> -->
-      <span class="pag-text-msg" v-if="moreState == 1"> 加载更多 </span>
-      <span class="pag-text-msg" v-if="moreState == 2">加载中</span>
-      <span class="pag-text-msg" v-if="moreState == 3">没有更多数据了</span>
+      <el-button type="primary" @click="clickMore()"  v-if="moreState == 1">加载更多</el-button>
+    </div>
+
+    <div v-if="moreState == 1" class=" xcontent postfixt-bot">
+     <interactBar  :data="data" :type="3" :comments="false" :shares="true"></interactBar>
+      <el-button>返回顶部</el-button>
     </div>
   </div>
 </template>
 
 <script >
+import interactBar from '@/components/Portal/interactBar.vue';
 import pdf from "vue-pdf";
 export default {
-  components: { pdf },
+  components: { pdf,interactBar },
   props: {
     filePath: {
       type: String,
@@ -55,6 +59,9 @@ export default {
       type: Boolean,
       default: false,
     },
+    data:{
+      type:Array,
+    }
   },
   data() {
     return {
@@ -66,7 +73,7 @@ export default {
       loadedRatio:0,// 加载进度
       showProgress:true,
       moreState:1,// 1 加载更多 2 加载中 3无数据
-     isscroll:true,
+     isscroll:false,
      pdfpage:0,
     };
   },
@@ -101,41 +108,49 @@ export default {
   },
   methods: {
     loadProgress(e){
-      //  console.log(e,'loadProgress');
+       console.log(e,'loadProgress');
     },
     loadedPageHandle(e){
+       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.moreState = 2;
        }
-      // this.isscroll = true;
-
-    },
+      this.isscroll = true;
+     
+    },     
     //加载页面
     loadInitPdf(url) {
-      //console.log('加载pdf文件:'+url)
-      //if(url && url.indexOf('.pdf')>-1){
+     
+      if(url && url.indexOf('.pdf')>-1){
         let loadingTask = pdf.createLoadingTask(url);
         this.src=loadingTask;
-        loadingTask.promise.then((pdfrs) =>{
-            this.totalPages=pdfrs.numPages;
-            if(pdfrs.numPages>this.initNum){
+        
+        loadingTask.promise.then((pdf) =>{
+           console.log(pdf)
+            this.totalPages=pdf.numPages;
+          
+
+            if(pdf.numPages>this.initNum){
               this.showPages = this.initNum;
+             
             } else{
-              this.showPages =pdfrs.numPages;
+              this.showPages =pdf.numPages;
+            
             }
+            
+            
           }).catch((err) =>{
             this.$message.error("加载内容失败,请联系管理员");
           });
-
-      //}
+         
+      }
     },
 
    handleScroll() {
@@ -143,30 +158,39 @@ export default {
       let innerHeight = document.querySelector('#pdf-perView').clientHeight
       let outerHeight = document.documentElement.clientHeight
       let scrollTop = document.documentElement.scrollTop
-        if((outerHeight + scrollTop + 350) >= innerHeight) {
-          if(this.isscroll){
-            this.debounce(this.clickMore(),6000);
-          }
-          if( this.showPages >= this.totalPages){
-            this.isscroll = false
-          }
-        }
+     
+        if(this.isscroll){
+          this.showPages++;
+          this.moreState = 2;
+          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
+        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);
-        }
-    },
+    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--;
@@ -210,12 +234,19 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.postfixt-bot{
+  height: 100px;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  background-color: #666;
+  z-index: 999;
+}
 .pdf-perView {
   .pdf-box {
     min-height: 300px;
     width: 100%;
     //border: 1px solid #dfdfdf;
-    background-color: #e9e9e9;
     overflow-y: hidden;
     overflow-x: hidden;
     >span{