实现上滑加载

test/src/views/banMange/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div ref="Box" id="target">
     <div class="right-top">
       <img src="../../assets/home.png" alt="" />
       <span>解封/</span>
@@ -154,8 +154,44 @@ export default {
     this.getList();
     this.timer();
     this.getPhoneList();
+
+    if(this.isShow === true) {
+      window.addEventListener("scroll", this.scroll, true);
+      // console.log('true');
+    }
   },
   methods: {
+    scroll() {
+      //滚动条距离顶部的距离（因为是负的所以*-1）
+      let scrollTop = this.$refs.Box.getBoundingClientRect().top * -1;
+      //页面可是高度
+      let windowHeight =document.documentElement.clientHeight || document.body.clientHeight;
+      //盒子的高度
+      let scrollHeight = this.$refs.Box.scrollHeight;
+      // console.log('距顶部的距离'+scrollTop+'可视高度的高度'+windowHeight+ '盒子的高度'+scrollHeight);
+
+      // console.log(scrollTop);
+      // console.log(windowHeight);
+      // console.log(scrollHeight);
+      //当滚动条距离顶部的距离加上页面可视高度和盒子的高度相等的情况下说明已经到底了
+      // https://blog.csdn.net/weixin_54378398/article/details/120196737
+      if(scrollTop + windowHeight <=1018){
+        this.isShow = true
+      }
+      if (scrollTop + windowHeight > scrollHeight) {
+        //可以操作加载更多了。
+        if(this.isShow){
+          setTimeout(() => {
+        this.loadMore()
+            // console.log('可以加载更多了');
+          }, 200);
+        // console.log(this.isShow);
+        }
+        else{
+          return
+        }
+      }
+    },
     // 加载更多
     async loadMore() {
       this.i++;
@@ -198,9 +234,21 @@ export default {
       this.phoneList = [];
       this.phoneList = this.phoneList.concat(response.result.data);
       this.isPut = false;
-      this.isShow = true;
+      // this.isShow = true;
       this.i = 1;
       this.inp2 = ''
+      let scrollTop = this.$refs.Box.getBoundingClientRect().top * -1;
+       let windowHeight =document.documentElement.clientHeight || document.body.clientHeight;
+      //盒子的高度
+      let scrollHeight = this.$refs.Box.scrollHeight;
+      // scrollTop =-100+'px'
+      // scrollHeight = 1068+'px'
+      // document.documentElement.scrollTop = 0;
+      // console.log(response.result.data);
+       window.removeEventListener("scroll",this.scroll);
+      // console.log('距顶部的距离'+scrollTop+'可视高度的高度'+windowHeight+ '盒子的高度'+scrollHeight);
+      // scrollTop =-100+'px'
+      target.scrollIntoView();
     },
     clickcard(item) {
       // console.log(item)

test/src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="right dialog-father" ref="tree"  >
+  <div class="right dialog-father" ref="Box" @scroll.passive="scroll">
     <div class="right-top">
       <img src="../../assets/home.png" alt="" />
       <span>系统信息/</span>
@@ -172,7 +172,7 @@
 
       <!-- pc样式表格区域 -->
       <div class="table-container">
-        <el-table ref="multipleTable" :data="jiashuzu" style="width: 100%;">
+        <el-table ref="multipleTable" :data="jiashuzu" style="width: 100%">
           <el-table-column label="序号" min-width="5%" align="center">
             <template slot-scope="scope">
               {{ scope.$index + 1 + (page - 1) * page_size }}
@@ -304,7 +304,6 @@ export default {
 
   data() {
     return {
-    
       y: 0, //获取 更多操作按钮的y距离
       windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
       windowHeight: document.documentElement.clientHeight, //实时屏幕高度
@@ -513,17 +512,6 @@ export default {
     this.memoryValue = data.memory_rate;
     this.diskValue = data.disk_rate;
     // console.log(this.jiashuzu);
-
-
-
-    
-
-
-   
-
-       
-
-  
   },
   mounted() {
     this.getTable();
@@ -545,10 +533,47 @@ export default {
       })();
     };
     // console.log(this.windowWidth);
-    // this.getScroll()
+    
+    if(this.isShow === true) {
+      window.addEventListener("scroll", this.scroll, true);
+      // console.log('true');
+    }
+    
+    
+
   },
   methods: {
-  
+    scroll() {
+      //滚动条距离顶部的距离（因为是负的所以*-1）
+      let scrollTop = this.$refs.Box.getBoundingClientRect().top * -1;
+      //页面可是高度
+      let windowHeight =document.documentElement.clientHeight || document.body.clientHeight;
+      //盒子的高度
+      let scrollHeight = this.$refs.Box.scrollHeight;
+      // console.log('距顶部的距离'+scrollTop+'可视高度的高度'+windowHeight+ '盒子的高度'+scrollHeight);
+
+      // console.log(scrollTop);
+      // console.log(windowHeight);
+      // console.log(scrollHeight);
+      //当滚动条距离顶部的距离加上页面可视高度和盒子的高度相等的情况下说明已经到底了
+      // https://blog.csdn.net/weixin_54378398/article/details/120196737
+      if(scrollTop + windowHeight <=1018){
+        this.isShow = true
+      }
+      if (scrollTop + windowHeight > scrollHeight) {
+        //可以操作加载更多了。
+        if(this.isShow){
+          setTimeout(() => {
+        this.loadMore()
+            // console.log('可以加载更多了');
+          }, 200);
+        // console.log(this.isShow);
+        }
+        else{
+          return
+        }
+      }
+    },
 
     // 加载更多
     async loadMore() {
@@ -576,11 +601,24 @@ export default {
     async put() {
       const response = await this.$axios(`/api/process/?page=1&size=5`, "GET");
       this.jiashuzu = [];
-      this.jiashuzu = this.jiashuzu.concat(response.result.data);
+      this.jiashuzu = response.result.data;
       this.isPut = false;
-      this.isShow = true;
+      // this.isShow = true;
       this.i = 1;
       this.inp1 = "";
+      let scrollTop = this.$refs.Box.getBoundingClientRect().top * -1;
+       let windowHeight =document.documentElement.clientHeight || document.body.clientHeight;
+      //盒子的高度
+      let scrollHeight = this.$refs.Box.scrollHeight;
+      scrollTop =-10+'px'
+      scrollHeight = 1068+'px'
+      // console.log(response.result.data);
+       window.removeEventListener("scroll",this.scroll);
+      // console.log('距顶部的距离'+scrollTop+'可视高度的高度'+windowHeight+ '盒子的高度'+scrollHeight);
+      setInterval(() => {
+      // this.isShow = true;
+        
+      }, 1000);
     },
 
     clickcard(e, item) {
@@ -1015,7 +1053,15 @@ export default {
   },
 
   watch: {
-  
+    isShow(newValue,oldValue) {
+      console.log(oldValue);
+      console.log(newValue);
+      if(newValue===false) {
+        console.log('移出了');
+        window.removeEventListener("scroll",this.scroll);
+        
+      }
+    },
     windowHeight(val) {
       let that = this;
       // console.log("实时屏幕高度：", val, that.windowHeight);

test/vue.config.js

@@ -8,8 +8,8 @@ module.exports = {
     // proxy:配置代理服务器,类似于Node.js中的http-proxy-middleware
     proxy: {
       '/api': { // 有api就转发
-        // target: 'http://192.168.1.17:56789', // 转发到这个地址
-        target:'http://114.115.147.140:56789',//在线地址
+        target: 'http://192.168.1.17:56789', // 转发到这个地址
+        // target:'http://114.115.147.140:56789',//在线地址