vue 上滑加载更多

Posted 小虫虫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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	

  

 

以上是关于vue 上滑加载更多的主要内容,如果未能解决你的问题,请参考以下文章

使用jquery.more.js上滑加载更多

微信小程序 scroll-view 上滑没有加载更多问题

在片段中添加上滑面板

解决上滑过程中数据重复的问题

react + antd-mobile 的listview 在h5移动网页端的下拉刷新和上滑加载的实现

vue.js项目实战运用篇之抖音视频APP-第九节: 视频上滑下拉播放功能