Vue-封装scroll触底

1.scroll/index.vue

 1 <template>
 2  <div class="scroll"></div>
 3 </template>
 4 
 5 <script>
 6      export default {
 7          name:'Scroll',
 8          methods:{
 9              scrollEvent(){                 
10                  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
11                  this.scrollTop = scrollTop
12                  console.log(this.scrollTop)
13                  //浮动框变化的高度
14                    const height1 =
15                      document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
16                    //屏幕的高度
17                    const height2 =
18                      document.documentElement.clientHeight || document.body.clientHeight;
19                    //id=list-box的高度
20                    const height3 =
21                      document.getElementById("home").scrollHeight ||
22                      document.documentElement.clientHeight ||
23                      document.body.clientHeight;
24                  if (height1 + height2 >= height3) {
25                   this.onBottom();
26                  }
27              }
28          },
29          props:{
30             onBottom:Function
31          },
32          mounted(){
33             window.addEventListener('scroll', this.scrollEvent,true);
34          },
35          destroyed () {
36            window.removeEventListener('scroll', this.scrollEvent,true);
37           }
38      }
39 </script>
40 <style scoped>
41 </style>

2.main.js引入

1 import Scroll from "@/components/scroll"
2 Vue.component("Scroll",Scroll);

3.使用

1 <Scroll :onBottom="onBottom"></Scroll>

1 onBottom(){
2                 console.log("bottom")
3                 
4             }