vue 上滑加载更多

Posted 2020-10-28 小虫虫

移动端网页的上滑加载更多，其实就是滑动+分页的实现。

 

 

<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(){
　　　　　　　　　 let self = this;
                $(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();
                    }
                });
            }
        }
    }
</script>

　　

　　精妙的地方在 getServerData(）判断什么时候后端的数据全了，判断就是当前返回的数据长度小于约定的长度，说明到底了。

 如果后端是thinkphp，由于有page()函数，那么代码类似这样：

　　

//获取page参数
$page = I(\'get.page\',1);
//前后端约定每次显示的条数
$num = 3;
$M
->where()
-> page($page,$num)
->select