版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41179401/article/details/86351883
加载更多功能的实现
当要显示的数据量非常大时,如果我们一下子显示全部,往往不利于网站优化
效果图:
那么这个效果是如何实现的呢?
以tp5举例:
主页显示的数据设置为5,就是刚加载时只显示5条,每点击一次新加载5条(这些数据可以自己决定)
主页的控制器:Index.php:
public function index(){
// 显示文章列表 只显示5条
$article = DB::table('article')->order('date desc')->limit(2)->select();
$this->assign('article',$article);
return $this->fetch();
}
对应的视图:绑定load事件
<div id="article">
{volist name="article" id="vo"}
<div class="article">
//...显示文章的具体纤细
</div>
{/volist}
<!--加载更多的按钮-->
<div data-page="0" id="load-more" onclick="load(this)">阅读更多</div>
</div>
load事件:(传给后台的数据是data-page自定义属性值,点击后自增1)
function load(obj){
var page = obj.getAttribute('data-page');
// 提示正在加载
$('#load-more').html('loading ......');
$.ajax({
type:'POST',
url:ThinkPHP['ROOT']+'/index.php/index/index/more',
data:{
'page':page,
},
success:function(res){
if(res==''){
$('#load-more').html('没有更多数据了').css('color','red');
return false;
}
$('#load-more').html('阅读更多');
$('#load-more').before(res);
page++;
obj.setAttribute('data-page',page);
}
})
}
对应控制器加载更多的more方法:(每次根据前台传的值进行查询)
public function more(){
if($this->request->isAjax()){
$firstNum = 5; //最先显示的条数
$num = 5; //点击一次显示的条数
$page = input('post.page'); //接收的page 动态的
// 显示文章列表
$n = $firstNum+($page*$num);
$article = DB::table('article')->order('date desc')->limit($n,$num)->select();
//返回数据
$this->assign('ajaxArticle', $article);
return $this->fetch(); //返回视图
}
}
对应返回的视图:more.html
{volist name="ajaxArticle" id="vo"}
<div class="article">
//....文章的具体内容
</div>
{/volist}
ajax请求成功后将数据(整个视图)填充到 内容区(加载更多的前面)
success:function(res){
if(res==''){
$('#load-more').html('没有更多数据了').css('color','red');
return false;
}
$('#load-more').html('阅读更多');
$('#load-more').before(res);
page++;
obj.setAttribute('data-page',page);
}
这个流程就是
ajax请求->控制器查询返回视图->ajax成功后在回调函数中把数据(视图)填充到内容区。