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(){

　　　　　　　　　 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