Pbootcms-实现列表页ajax加载更多
废话不多说，直接说教程：
首先去后台开启API功能，位置：全局配置-配置参数-WebAPI-Api状态，点击开启。
模板中的代码如下：
<script>
$(function(){
var Page = 1;
// 每页展示12个
var Num = 1;
$(document).on('click','.more',function(){
// 页数
Page++;
$.ajax({
type: 'POST',
url: '/api.php/list/{sort:scode}/page/' + Page + '/num/' + Num + '/order/sorting',
dataType: 'json',
data: {
appid: '{pboot:appid}',
timestamp: '{pboot:timestamp}',
signature: '{pboot:signature}',
},
success: function( response, status ){
console.log(response);
var Data = response.data;
if( response.code ){
//获取数据成功
var Html = '';
jQuery.each( Data, function( index, value ){
//构建HTML
Html += '<li class="col-xs-6 col-ms-4 col-md-4">';
Html += '<a href="'+value.contentlink+'">';
Html += '<div class="image">';
Html += '<img src="'+value.ico+'" alt="'+value.title+'">';
Html += '</div>';
Html += '<div class="word">';
Html += '<h4 class="title">'+value.title+'</h4>';
Html += '</div>';
Html += '</a>';
Html += '</li>';
});
// 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到醉后面
$('.reflect-list ul').append(Html);
},500);
}else{
$('#loadmore').slideUp();
}
},
error: function(xhr, type){
console.log('Ajax error!');
}
});
});
});
</script>
最后是：初始列表html部分：
<div class="reflect-list profound-module">
<ul class="clearfix" id="list">
{pboot:list num=1 order=sorting}
<li class="col-xs-6 col-ms-4 col-md-4">
<a href="[list:link]">
<div class="image">
<img src="[list:link]" alt="[list:title]">
</div>
<div class="word">
<h4 class="title">[list:title]</h4>
</div>
</a>
</li>
{/pboot:list}
</ul>
</div>
<div class="load-pagination">
<div class="mobile-load" id="loadmore"><a href="javascript:;" class="viewmore-module more">加载更多</a></div>
<div class="pagination" id="page">
{include file=comm/page.html}
</div>
</div>
