Vue-封装scroll触底

1.scroll/index.vue

<template>
 <div class="scroll"></div>
</template>

<script>
     export default {
         name:'Scroll',
         methods:{
             scrollEvent(){                 
                 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                 this.scrollTop = scrollTop
                 console.log(this.scrollTop)
                 //浮动框变化的高度
                   const height1 =
                     document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
                   //屏幕的高度
                   const height2 =
                     document.documentElement.clientHeight || document.body.clientHeight;
                   //id=list-box的高度
                   const height3 =
                     document.getElementById("home").scrollHeight ||
                     document.documentElement.clientHeight ||
                     document.body.clientHeight;
                 if (height1 + height2 >= height3) {
                  this.onBottom();
                 }
             }
         },
         props:{
            onBottom:Function
         },
         mounted(){
            window.addEventListener('scroll', this.scrollEvent,true);
         },
         destroyed () {
           window.removeEventListener('scroll', this.scrollEvent,true);
          }
     }
</script>
<style scoped>
</style>

2.main.js引入

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

3.使用

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

onBottom(){
                console.log("bottom")
                
            }