vue 上滑加载更多

<template>
    <div>
        <p class="footer-text">--{{footerText}}--</p>
        <p class="loading" v-show="loading"></p>
    </div>
</template>
<script>
    import $ from ‘jquery‘
    export default {
        data(){
            return{
                serverData:[],//接受服务器的数据,
                page:1,
                footerText:‘上滑加载更多‘,
                loading:false//loading的开关
            }
        },
        created(){
            this.getServerData(this.page);
            this.listenScroll();
        },
        beforeDestroy(){
            $(window).unbind(‘scroll‘);
        },
        methods:{
            getServerData(){
                //参数只有page,项目需要可以添加
                //项目中的ajax方式可能跟这个不一样，没关系，思路是相同的。
                const num = 3;//每一页接受多少条数据
                this.$api.get(‘url‘,{page:this.page},res=>{
                    this.loading = false;
                    this.serverData = res.data;//接受数据
                    if(res.data.length<num){
                        this.footerText = "到底了";
                        $(window).unbind(‘scroll‘);
                    }
                })
            },
            listenScroll(){
                $(window).scroll(function () {
                    let scrollTop = $(window).scrollTop();
                    let windowTop = $(window).height();
                    let documentTop = $(document).height();
                    if(documentTop - windowTop <= scrollTop){
                        self.page++;
                        self.loading = true;
                        self.getServerData(self.page);
                    }
                });
            }
        }
    }
</script>