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>