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 上滑加载更多的主要内容,如果未能解决你的问题,请参考以下文章