效果:点击加载更多,根据设定的加载条数显示加载内容,全部加载完毕后加载更多按钮消失。话不多说,直接上代码。
html代码:(这个样式可以根据需求自定义)
<div id="news">
<div class="wrap">
<div class="l-wrap" id="list">
<notempty name="list">
<volist name="list" id="vo">
<div class="item">
<div class="pic">
<a href="__MODULE__/NewsInfos/index/id/{$vo.id}">
<p class="bg">
![](__PUBLIC__/images/news-btn.png)
</p>
<if condition="$vo['pic'] neq ''">
![](__ROOT__{$vo.pic})
<else />
暂无图片
</if>
</a>
</div>
<div class="texts">
<a href="__MODULE__/NewsInfos/index/id/{$vo.id}">
<h3>{$vo.title}</h3>
</a>
<p class="p1"><span>{$vo.fabu_time}</span> 作者:<span>miss麦</span></p>
<p class="p2" id="content">
{$vo.content}
</p>
</div>
</div>
</volist>
</notempty>
</div>
</div>
</div>
<!-- 加载更多 -->
<div class="more"></div>
js代码:
var page = 0;
$('.more').click(function() {
var n = $("#news .item").length;//当前item个数
// alert(n);
page += 3;//点击一次追加3条
$.ajax({
url:'{:U("News/more")}',
cache: false,
async: false,
data:{p:page,n:n},
dataType: "json",
type:"post",
success:function(datas){
var more_show = datas[0];
var data = datas[1];
var html='';
if (more_show == 1) {
$(".more").show();
}else{
$(".more").hide();
}
for (var i in data) { //循环遍历
html +='<div class=\"item\">';
html +='<div class=\"pic\">';
html +='<a href=\"__MODULE__/NewsInfos/index/id/'+data[i].id+'\"> ';
html +='<p class="bg">';
html +='<img src=\"__PUBLIC__/images/news-btn.png\" />';
html +='</p>';
html +='<img src=\"__ROOT__'+data[i].pic+'\"> ';
html +='</a>';
html +='</div>';
html +='<div class=\"texts\">';
html +='<a href=\"__MODULE__/NewsInfos/index/id/'+data[i].id+'\"> ';
html +='<h3>'+data[i].title+'</h3>';
html +='</a>';
html +='<p class=\"p1\"><span>'+data[i].fabu_time+'</span> 作者:<span>miss涂麦</span></p>';
html +='<p class=\"p2\" id="content\">';
html +=data[i].content;
html +='</p>';
html +='</div>';
html +='</div>';
}
$('#list').append(html);//追加
}
});
});
PHP代码:
public function more(){
$news = M('news');
$count =$news->count();
if(!empty($_POST['p'])){ //点击加载更多
$p = $_POST['p'];//3 6 9
$n = $_POST['n'];
if (($p+$n)>=$count) {
$flag =0;
}else{
$flag =1;
}
$b= 3; //显示条数
$list = $news->order('create_time desc')->limit($p,$b)->select();
$arr[0] = $flag;
$arr[1] = $list;
$arr.join();
$this->ajaxReturn($arr,'JSON');
}
}