vue项目上滑滚动加载更多&下拉刷新

上滑滚动时获取内容高度、屏幕高度和滚动高度（此处#sslist要为内容是id）

内容高度  let innerHeight = document.querySelector("#sslist").clientHeight;

屏幕高度 let outerHeight = document.documentElement.clientHeight;
滚动高度 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;

代码：

 <template>
     <div id="sslist">
         <div class="readlist main">
             <div class="read">
                 <h4 class="regulartitle"><i>S-SENTENCE - {{readcount}}</i><router-link to="/ssadd">addsentence</router-link></h4>
                 <ul class="booklist">
                     <li v-for="(item, index) in readLists">
                         {{item.content}}
                     </li>
                 </ul>
             </div>
         </div>
         <div v-if="has_log == 0">
             <span>上拉加载</span>
         </div>
         <div v-if="has_log == 1">
             <span>正在加载</span>
         </div>
         <div v-if="has_log == 2">
             <span>没有更多数据了</span>
         </div>
     </div>
 </template>
 <script>
     export default{
         name: 'sslist',
         data(){
             return {
                 readLists: [],
                 readcount: '',
                 list_param:{
                     page: 1,
                     pageLimit: 20
                 },
                 totalpages: 0, //总页数
                 has_log: 0, //显示提示 0-上拉加载 1-正在加载 2-没有更多数据了
                 no_data: false //是否还有数据
             }
         },
         mounted(){
             this.getList();

             window.addEventListener('scroll', this.onScroll);
         },
         methods: {
             onScroll(){
                 this.has_log = 1;
                 let innerHeight = document.querySelector("#sslist").clientHeight;
                 let outerHeight = document.documentElement.clientHeight;
                 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;

                 console.log(innerHeight + ' ' + outerHeight + ' ' + scrollTop);

                 if(outerHeight + scrollTop === innerHeight){
                     if(this.no_data === true){
                         this.has_log = 2;
                         return false;
                     }

                     this.getList();

                 }

                 if(scrollTop < 0){
                     this.list_param.page = 1;
                     this.getList();
                 }
             },
             getList(){
                 var that = this;
                 this.axios.get("http://127.0.0.1/api/singlesentence/getlist.php",{params:that.list_param}).then((ret)=>{
                     if(ret.status == 200){
                         if(that.list_param.page == 1){
                             that.readLists = ret.data.lists;
                         }else{
                             that.readLists = that.readLists.concat(ret.data.lists);
                         }

                         if(that.list_param.page < ret.data.totalpages){
                             that.list_param.page += 1;
                         }else{
                             that.no_data = true;
                         }

                         that.readcount = ret.data.count;
                         that.totalpages = ret.data.totalpages;
                     }
                 })
             }
         }
     }
 </script>
 <style>
 </style>