php ajax 加载列表,dedecms使用ajax+php实现列表无限加载

快来打我* 2022-11-13 02:00 316阅读 0赞

经常会在手机app上看到列表页面下来或者点击的时候可以实现无限加载更多内容的效果，今天说下在织梦网站中如何实现这个功能。

这个功能需要用到PHP和ajax技术。

首先找到并打开/plus/list.php文件，在里面找到如下代码：

require\_once(dirname(\_\_FILE\_\_)."/../include/common.inc.php");

在其下面添加如下代码：

//列表页瀑布流无限加载代码

if(isset($\_GET\['ajax'\]))\{

$typeid = isset($\_GET\['typeid'\]) ? intval($\_GET\['typeid'\]): 0;//传递过来的分类ID

$page = isset($\_GET\['page'\]) ? intval($\_GET\['page'\]): 0;//页码

$pagesize = isset($\_GET\['pagesize'\]) ? intval($\_GET\['pagesize'\]): 15;//每页多少条，也就是一次加载多少条数据

$start = $page>0 ? ($page-1)\*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。

$typesql = $typeid ? " WHERE typeid=$typeid" : '';//这个是用于首页实现瀑布流加载，因为首页加载数据是无需分类的，所以要加以判断，如果无需

$total\_sql = "SELECT COUNT(id) as num FROM \`\#@\_\_archives\` $typesql ";

$temp = $dsql->GetOne($total\_sql);

$total = 0;//数据总数

$load\_num =0;

if(is\_array($temp))\{

$load\_num= round(($temp\['num'\]-15)/$pagesize);//要加载的次数,因为默认已经加载了

$total = $temp\['num'\];

$sql = "SELECT a.\*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,

t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath

FROM \`\#@\_\_archives\` as a JOIN \`\#@\_\_arctype\` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize";

$dsql->SetQuery($sql);

$dsql->Execute('list');

$statu = 0;//是否有数据，默认没有数据

$data = array();

$index = 0;

while($row = $dsql->GetArray("list"))\{

$row\['info'\] = $row\['info'\] = $row\['infos'\] = cn\_substr($row\['description'\],160);

$row\['id'\] = $row\['id'\];

$row\['filename'\] = $row\['arcurl'\] = GetFileUrl($row\['id'\],

$row\['typeid'\],$row\['senddate'\],$row\['title'\],$row\['ismake'\],

$row\['arcrank'\],$row\['namerule'\],$row\['typedir'\],$row\['money'\],

$row\['filename'\],$row\['moresite'\],$row\['siteurl'\],$row\['sitepath'\]);

$row\['typeurl'\] = GetTypeUrl($row\['typeid'\],$row\['typedir'\],

$row\['isdefault'\],$row\['defaultname'\],$row\['ispart'\],

$row\['namerule2'\],$row\['moresite'\],$row\['siteurl'\],$row\['sitepath'\]);

if($row\['litpic'\] == '-' || $row\['litpic'\] == '')\{

$row\['litpic'\] = $GLOBALS\['cfg\_cmspath'\].'/images/defaultpic.gif';

if(!preg\_match("\#^http:\\/\\/\#i", $row\['litpic'\]) &&$GLOBALS\['cfg\_multi\_site'\] == 'Y')\{

$row\['litpic'\] = $GLOBALS\['cfg\_mainsite'\].$row\['litpic'\];

$row\['picname'\] = $row\['litpic'\];//缩略图

//$row\['stime'\] = GetDateMK($row\['pubdate'\]);

$row\['stime'\] = date('Y-m-d H:i', $row\['pubdate'\]);

$row\['click'\] = $row\['click'\];

$row\['typelink'\] = "".$row\['typename'\]."";//分类链

$row\['fulltitle'\] = $row\['title'\];//完整的标题

$row\['shorttitle'\] = $row\['shorttitle'\];//副标题

$row\['title'\] = cn\_substr($row\['title'\], 80);//截取后的标题

$data\[$index\] = $row;

$index++;

if(!empty($data))\{

$statu = 1;//有数据

$result =array('statu'=>$statu,'list'=>$data,'total'=>$total,'load\_num'=>$load\_num);

echo json\_encode($result);//返回数据

exit();

在对应的模板里引入jQuery文件。

在模板底部添加如下代码：

var loadConfig = \{

url\_api: '/plus/list.php',

typeid: \{

dede: field name = "typeid" /

\},

page: 2,

pagesize: 10, //这个就是滑动一次添加几条信息的参数设置

loading: 0,

function loadMoreApply() \{

if (loadConfig.loading == 0) \{

var typeid = loadConfig.typeid;

var page = loadConfig.page;

var pagesize = loadConfig.pagesize;

var url = loadConfig.url\_api,

data = \{

ajax: 'pullload',

typeid: typeid,

page: page,

pagesize: pagesize

\};

var sTop = document.body.scrollTop || document.documentElement.scrollTop,

dHeight = $(document).height(),

cHeight = document.documentElement.clientHeight;

// console.log(dHeight);

if (sTop + cHeight >= dHeight - cHeight) \{

loadConfig.loading = 1;

function ajax(url, data) \{

$.ajax(\{

url: url,

data: data,

async: false,

type: 'GET',

dataType: 'json',

success: function (data) \{

addContent(data);

\});

ajax(url, data);

function addContent(rs) \{

if (rs.statu == 1) \{

var data = rs.list;

var total = rs.total;

var arr = \[\];

var length = data.length;

for (var i = 0; i < length; i++) \{

arr.push('

');

arr.push('

!['%20+%20data%5Bi%5D.litpic%20+%20'][20_20data_5Bi_5D.litpic_20_20] ' + data\[i\].title + '');

arr.push('

' + data\[i\].stime + ' ' + data\[i\].writer + ' ' + data\[i\].click + '次

');

arr.push('

' + data\[i\].description + '

');

arr.push('

');

$('.articleindex-l').append(arr.join(''));

loadConfig.load\_num = rs.load\_num;

if (total < loadConfig.page \* loadConfig.pagesize || loadConfig.page > loadConfig.load\_num) \{

window.removeEventListener('srcoll', loadMoreApply, false);

loadConfig.page++;

loadConfig.loading = 0;

function pullLoad() \{

window.addEventListener('scroll', loadMoreApply, false);

pullLoad();

上面的代码中的$('.articleindex-l').append(arr.join(''));里的articleindex-l对应模板内列表的外框class属性。

arr.push部分对应的是列表中单篇文章的代码。

这样就可以想要使用瀑布流无线加载了。

如果在其它页调用的话只需把代码中的typeid:\{dede:field name="typeid"/\} 修改为typeid:5(5 就是我们要调用文章的栏目ID)即可。

注意：很多人在调试这个功能的时候可能把标签写成了\{dede:list pagesize='10'\}\{/dede:list\} 要用\{dede:arclist row="15"\}\{/dede:arclist\}才可以，不然文章是加载不出来的！

“加载完成”的提示！

继续在模板中找到：

if(total loadConfig.load\_num)\{

window.removeEventListener('srcoll',loadMoreApply,false);

在判断语句的最后加上如下代码:

$('

加载完成

').insertAfter('.jz\_more');

到此，全部完成。

[20_20data_5Bi_5D.litpic_20_20]:

php ajax 加载列表,dedecms使用ajax+php实现列表无限加载

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关使用PHP和AJAX实现简单的动态内容加载

相关使用weui滚动加载结合php实现分类页数据列表

相关 php ajax 加载列表,dedecms使用ajax+php实现列表无限加载

相关 uni-app实现列表懒加载

相关 freemark动态加载列表数据

相关 jquery列表点击加载更多

相关 React Native ：加载新闻列表

相关 APP列表数据加载算法

相关 Android数据分批加载-滑动到底部自动加载列表

相关 uni-App手撸瀑布流+列表无限加载