HTML部分
<!--列表-->
<div id="lists">
<!--本示例顯示所有最新文章,根據實際情況自行調整-->
{pc:get sql="SELECT * FROM `v9_news` where status=99 Order by updatetime DESC " num="10"}
{loop $data $n $r}
<a href="{$r[url]}">
<img src="{thumb($r[thumb],520,160)}">
<!--自動縮放裁剪圖片大小520x160-->
<dl>
<dt>[{$CATEGORYS[$r[catid]][catname]}] {$r[title]} - {date('m/d',$r[inputtime])}</dt>
<!--$CATEGORYS 調用緩存欄目名稱-->
<dd>{str_cut($r[description],200)}</dd>
<!--描述截取200個字符-->
</dl>
</a>
{/loop}
{/pc}
</div>
<!--
示例:
{鏈接}
{圖片}
[{欄目}]{標題} - {時間}
{描述}
-->
<!--加載提示-->
<div id="loading" style="display:none"></div>
JavaScript腳本部分
<script>
$(function(){
var pager=1; /*定義開始頁碼*/
var controller=true; /*定義控制器,防止重復加載*/
$(window).scroll(function() {
/*監聽滾動事件*/
/*當內容滾動到底部時加載新的內容(注:當距離最底部100個像素時開始加載)*/
if ($(this).scrollTop() + $(window).height() + 100 >= $(document).height() && $(this).scrollTop() > 100) {
$("#loading").html("加載中,請稍后...").show(); /*打開加載提示*/
if(controller==true){/*如果控制器是開的*/
controller=false;/*關閉加載*/
pager=pager+1;/*當前要加載的頁碼*/
$.getJSON("{APP_PATH}api.php?op=autoload&page="+pager, function(data){
var i=0;
$.each(data,function(r){
i++;
var html='<a href="'+data[r].url+'"><img src="'+data[r].thumb+'"><dl><dt>['+data[r].catname+'] '+data[r].title+' - '+data[r].updatetime+'</dt><dd>'+data[r].description+'</dd></dl></a>';
/*示例
var html='<a href="'+data[r].url+'">
<img src="'+data[r].thumb+'">
<dl>
<dt>['+data[r].catname+'] '+data[r].title+' - '+data[r].updatetime+'</dt>
<dd>'+data[r].description+'</dd>
</dl>
</a>';
*/
$("#lists").append(html);/*追加到列表中*/
});/*end each*/
controller=true;/*開啟加載*/
$("#loading").hide(); /*關閉加載提示*/
if(i==0){
$("#loading").html("已經全部加載完").show();
}
});/*end getJSON*/
}/*end if*/
}/*end if*/
});/*end scroll*/
});/*end function*/
</script>
PHP部分
在api目錄下新建文件,命名為autoload.php,然后添加下面內容。
<?php
defined('IN_PHPCMS') or exit('No permission resources.');
$db = '';
#加載內容模型
$db = pc_base::load_model('content_model');
#重定義加載的表名
$db->table_name = 'v9_news';
#加載緩存中的欄目名稱,注 category_content_站點ID
$CATEGORYS = getcache('category_content_1','commons');
$page=isset($_GET['page'])?intval($_GET['page']):1;
#判斷傳入的page是否存在
#查詢表數據
$data = $db->select(
'status=99 ORDER BY `id` DESC LIMIT '.($page-1)*10 .' , ' . 10 .' '#根據實際情況調整where語句
,'id,catid,title,style,thumb,description,url,updatetime,inputtime,username' #需要調取的字段,如需要全部字段則刪除本段
);
#定義數組容器
$array=array();
#遍歷查詢到的數組,注:如不需要對 圖片、時間、欄目進行轉換可跳過遍歷直接將$data輸出
foreach ($data as $key => $value) {
$array[]=array(
"id"=>$value['id'],
"title"=>$value['title'],
"style"=>$value['style'],
"thumb"=>$value['thumb']?thumb($value['thumb'],520,160):"",
"description"=>str_cut($value['description'],200),
"url"=>$value['url'],
"updatetime"=>date('m/d',$value['updatetime']),
"inputtime"=>date('m/d',$value['inputtime']),
"username"=>$value['username'],
"catname"=>$CATEGORYS[$value['catid']]['catname']
);
}
#將數組轉換為json數據并輸出
echo json_encode($array);
?>
常見問題
1、下拉無法加載
使用Google Chrome瀏覽器訪問按F12,查看控制臺中是否存在js錯誤。
2、下拉重復顯示
請確認排序是否一致
例如:前臺調用標簽 Order by updatetime DESC 是否與后端php SQL查詢一致
更新日志
2016年12月15日 修復PHP部分SQL語句不完全而導致的SQL錯誤繼而加載錯誤。
內容附件