update

src/components/Educationvideo.vue

 
 <template>
-  <div class="Educationvideo">
+  <div class="Educationvideo" ref="divSrcoll">
     <div class="left">
         <ul class="lineUl" style="margin-top:64px">
             <li @click="SelectLineId(-1)" :class="msg.LineId ==-1 ? 'Active' : ''">
@@ -51,14 +51,16 @@
             <div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
               <span style="font-size:60px;color:#ccc" class="iconfont icon-wushuju"></span>
             </div>
-            <el-pagination background @current-change="handleCurrentChange"
+            <div v-show="nodata && msg.pageIndex>1" class="wryh" style="text-align:center;padding:15px 0;font-size:12px;color:#aaaaaa">无更多数据</div>
+            <!-- <el-pagination background @current-change="handleCurrentChange"
                 layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'>
-            </el-pagination> 
+            </el-pagination>  -->
         </div>
+        <div style="opacity: 0;" ref="bottomDiv">1111</div>
     </div>
     <div class="videoDiv" v-show="videoDivState">
-      <div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="videoDivState=false" style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div>
-      <video autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress" controls="controls"></video>
+      <div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="Setvideo" style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div>
+      <video ref="myVideo" autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress" controls="controls"></video>
     </div>
     
 
@@ -91,34 +93,58 @@ export default {
       dataList:[],
       total:0,
       loading:false,
+      windowHeight:0,
+      nodata:false,
     }
   },
   mounted() {
     this.getLineList();
     this.getList();
-     window.addEventListener('scroll',function(){
-       console.log("ddocument.documentElement.offsetHeight",document.documentElement.offsetHeight)
-       console.log("ddocument.documentElement.scrollTop",document.documentElement.scrollTop)
-       console.log("window.innerHeight",window.innerHeight)
-      let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
-       console.log("bottomOfWindow",bottomOfWindow)
-       
-       if(bottomOfWindow) {
-          console.log("滚动到底部")
-       }
-     })
+    this.$nextTick(()=>{
+      window.addEventListener('scroll',this.ScrollTop)
+
+    })
+    
+   let h = document.documentElement.clientHeight || document.body.clientHeight;
+   this.windowHeight=h;
+  },
+  destroyed(){
+      window.removeEventListener('scroll',this.ScrollTop)
+
   },
   methods: {
+      Setvideo(){
+        this.videoDivState=false;
+        let myVideo=this.$refs.myVideo;
+        myVideo.pause();
+      },
+      ScrollTop(){
+        var that = this;
+        // that.scroll = (document.documentElement.scrollTop || document.body.scrollTop)+70;
+        // var divSrcoll = this.$refs.divSrcoll.scrollTop;
+        if(that.$refs.bottomDiv.getBoundingClientRect()){
+          var bottomDiv = that.$refs.bottomDiv.getBoundingClientRect().top;
+          if(this.windowHeight-50 < bottomDiv){
+            this.handleCurrentChange();  
+          }
+        }
+        
+        // console.log("divSrcoll",divSrcoll)
+      },
       SelectLineId(id){
+          this.dataList=[];
           this.msg.LineId=id;
           this.getList();
       },
-      handleCurrentChange(val) {
-            this.msg.pageIndex = val;
+      handleCurrentChange() {
+            this.msg.pageIndex = this.msg.pageIndex+1;
             this.getList();
         },
       //获取列表
       getList() {
+        if(this.nodata){
+          return;
+        }
         this.loading=true;
         this.apipost(
           "Video_get_GetPCVideoPageList",this.msg,
@@ -126,10 +152,15 @@ export default {
             this.loading=false;
 
             if (res.data.resultCode == 1) {
-              this.dataList = res.data.data.pageData;
+              let data= res.data.data.pageData;
+              if(data.length==0 && this.msg.pageIndex>1){
+                this.nodata=true;
+              }
+              else{
+                this.dataList = this.dataList.concat(data)
+              }
+              
               this.total = res.data.data.count;
-                console.log("this.dataList",this.dataList)
-
             }
           }
         );
@@ -156,8 +187,11 @@ export default {
       },
       goUrl(path,item){
         this.videoDivState=true;
+
         this.thisVideoAddress=item.VideoAddress;
         this.AddList(item.Id)
+        let myVideo=this.$refs.myVideo;
+        myVideo.play();
           // let msg=JSON.stringify(item)
           // this.$router.push({
           //   name:path,
@@ -270,6 +304,7 @@ export default {
     padding: 5px;
     box-sizing: border-box;
     margin-right: 10px;
+    margin-bottom:15px;
 }
   .Educationvideo .right .Content{
       padding:15px 15px 10px 15px;

src/components/EducationvideoList.vue

@@ -69,9 +69,12 @@
             <div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
               <span style="font-size:60px;color:#ccc" class="iconfont icon-wushuju"></span>
             </div>
-            <el-pagination background @current-change="handleCurrentChange"
+            <!-- <el-pagination background @current-change="handleCurrentChange"
                 layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'>
-            </el-pagination> 
+            </el-pagination>  -->
+            <div v-show="nodata && msg.pageIndex>1" class="wryh" style="text-align:center;padding:15px 0;font-size:12px;color:#aaaaaa">无更多数据</div>
+            <div style="opacity: 0;" ref="bottomDiv">1111</div>
+            
         </div>
     </div>
     <el-dialog
@@ -136,8 +139,8 @@
     </div>
     </el-dialog>
      <div class="videoDiv" v-show="videoDivState">
-      <div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="videoDivState=false" style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div>
-      <video autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress" controls="controls"></video>
+      <div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="Setvideo" style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div>
+      <video ref="myVideo" autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress" controls="controls"></video>
     </div>
   </div>
 </template>
@@ -194,13 +197,40 @@ export default {
        },
        loading:false,
        baseurl:'http://vt-im-bucket.oss-cn-chengdu.aliyuncs.com',
+       windowHeight:0,
+        nodata:false,
     }
   },
   mounted() {
     this.getLineList();
     this.getList();
+    this.$nextTick(()=>{
+      window.addEventListener('scroll',this.ScrollTop)
+
+    })
+    
+   let h = document.documentElement.clientHeight || document.body.clientHeight;
+   this.windowHeight=h;
+  },
+    destroyed(){
+      window.removeEventListener('scroll',this.ScrollTop)
+
   },
   methods: {
+      Setvideo(){
+        this.videoDivState=false;
+        let myVideo=this.$refs.myVideo;
+        myVideo.pause();
+      },
+       ScrollTop(){
+        var that = this;
+        if(that.$refs.bottomDiv.getBoundingClientRect()){
+          var bottomDiv = that.$refs.bottomDiv.getBoundingClientRect().top;
+          if(this.windowHeight-50 < bottomDiv){
+            this.handleCurrentChange();  
+          }
+        }
+      },
         DeleteSrc(num){
             if(num==1){
                 this.addMsg.Cover='';
@@ -250,20 +280,28 @@ export default {
                 this.addMsg.Cover=this.addMsg.VideoAddress+lastUrl;
             });
         },
-        handleCurrentChange(val) {
-            this.msg.pageIndex = val;
+        handleCurrentChange() {
+            this.msg.pageIndex = this.msg.pageIndex +1;
             this.getList();
         },
       //获取列表
         getList() {
+            if(this.nodata){
+                return;
+            }
             this.loading=true;
             this.apipost(
             "Video_get_GetPCVideoPageList",this.msg,
             res => {
                 this.loading=false;
                 if (res.data.resultCode == 1) {
-                    this.dataList = res.data.data.pageData;
-                    this.total = res.data.data.count;
+                    let data= res.data.data.pageData;
+                    if(data.length==0 && this.msg.pageIndex>1){
+                        this.nodata=true;
+                    }
+                    else{
+                        this.dataList = this.dataList.concat(data)
+                    }
 
                 }
             }
@@ -346,6 +384,8 @@ export default {
             this.videoDivState=true;
             this.thisVideoAddress=item.VideoAddress;
             this.AddList(item.Id)
+            let myVideo=this.$refs.myVideo;
+            myVideo.play();
             // let msg=JSON.stringify(item)
             // this.$router.push({
             //     name:path,
@@ -514,6 +554,7 @@ export default {
     width: 300px;
     padding: 5px;
     box-sizing: border-box;
+    margin-bottom:15px;
 }
   .EducationvideoList .right .Content{
       padding:15px 15px 10px 15px;