想要自己加载得要涉及到PHP+JQ+AJAX:
第一步:新建个php代码get_news_index.php 上传到 /e/action:
<?php require('../class/connect.php'); require('../class/db_sql.php'); require('../data/dbcache/class.php'); if($_POST[action] == 'getmorenews'){ $table=htmlspecialchars($_POST[table]); if(empty($_POST[orderby])){$orderby='newstime';}else{ $orderby=htmlspecialchars($_POST[orderby]);} if(empty($_POST[myorder])){$myorder='desc';}else{ $myorder='asc';} if(empty($_POST[limit])){$limit=3;}else{ $limit=(int)$_POST[limit];} if(empty($_POST[classid])){$where=null;}else{ $where='where classid in('.$_POST[classid].')';} if(empty($_POST[length])){$length=50;}else{ $length=(int)$_POST[length];} if(empty($_POST[small_length])){$small_length=120;}else{ $small_length=(int)$_POST[small_length];} $link=db_connect(); $empire=new mysqlquery(); $num =(int)$_POST['next'] *$limit; if($table){ $sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by $orderby $myorder limit $num,$limit"); while($r=$empire->fetch($sql)){ if($r[titlepic]==''){ $r[titlepic]=$public_r[news.url]."e/data/images/notimg.gif"; } $oldtitle=stripSlashes($r[title]); $title=sub($oldtitle,'',$length); $smalltext=stripSlashes($r[smalltext]); $smalltext=sub($smalltext,'',$small_length); $classname=$class_r[$r[classid]][classname]; $newsurl=$public_r[newsurl]; $classurl=$newsurl.$class_r[$r[classid]][classpath]; ?> <article class="excerpt excerpt-one" data-id="<?=$r[classid]?>"> <header><a class="cat label label-important" href="<?=$class_r[$r[classid]]['classpath']?> "><?=$class_r[$r[classid]][bname]?><i class="label-arrow"></i></a> <h2><a href="<?=$r[titleurl]?>" title="<?=$r[oldtitle]?>"><?=$r[title]?></a></h2> <small class="text-muted"><span class="glyphicon glyphicon-picture"></span><?=$r[imgcount]?></small></header> <p class="text-muted time"><?=$r[username]?> 发布于 <?=date('Y-m-d',$r[newstime])?></p> <p class="focus"><a href="<?=$r[titleurl]?>" class="thumbnail"><img src="<?=$r[titlepic]?>" /></a></p> <p class="note"><?=$smalltext?>...</p> <p class="text-muted views"> <span class="post-views">阅读(<?=$r[onclick]?>)</span> <span class="post-comments">评论(<?=$r[plnum]?>)</span><a href="JavaScript:makeRequest('<?=$public_r[news.url]?>e/public/digg?classid=<?=$r[classid]?>&id=<?=$r[id]?>&dotop=1&doajax=1&ajaxarea=diggnum<?=$r[id]?>','EchoReturnedText','GET','');" class="post-like" ><i class="glyphicon glyphicon-thumbs-up"></i>赞 (<span id="diggnum<?=$r[id]?>"><?=$r[diggtop]?></span>)</a> <span class="post-tags">标签:<a href="/337/e/tags/?tagname=<?=stripSlashes($r[keyboard])?>" target="_blank" rel="tag" data-original-title><?=stripSlashes($r[keyboard])?></a></span></p> </article> //这部分代码添加自己的模板代码 <?php } } } db_close(); $empire=null; ?>
第二步要写js代码 ajaxShow.js:
$(function() { var i =0; //设置当前页数 if (!NeuF) var NeuF = {}; NeuF.ScrollPage = function (obj, options, callback) { var _defaultOptions = {delay: 500, marginBottom: 200}; //默认配置:延迟时间delay和滚动条距离底部距离marginBottom options = $.extend(_defaultOptions, options); this.isScrolling = false; //是否在滚动 this.oriPos = 0; //原始位置 this.curPos = 0; //当前位置 var me = this; //顶层 var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj); //绑定滚动事件 $obj.scroll(function (ev) { me.curPos = $obj.scrollTop(); if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) { if (me.isScrolling == true) return; me.isScrolling = true; setTimeout(function () { me.isScrolling = false; }, options.delay); //重复触发间隔毫秒 if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos); } ; me.oriPos = me.curPos; }); }; $(function () { window.scrollTo(0, 0); //每次F5刷新把滚动条置顶 function show() { $.ajax({ url: '/e/action/get_news_index.php',//自己的域名 type: 'POST', data: { "next": i, 'table': 'news', 'action': 'getmorenews', 'limit': 10, 'small_length': 120 }, dataType: 'html', beforeSend: function () { $("#loadmore").show().html('<img src="/307/skin/ecms103/images/loading.gif"/>正在努力加载中...'); $('#loadmore').attr('disabled', 'disabled'); }, success: function (data) { if (data) { $("#showajaxnews").append(data); $("#loadmore").removeAttr('disabled'); $("#loadmore").html('滚动加载更多'); i++; } else { $("#loadmore").show().html("已全部加载完毕!"); console.log(data); $('#loadmore').attr('disabled', 'disabled'); return false; } } }); }; show(); //marginBottom表示滚动条离底部的距离,0表示滚动到最底部才加载,可以根据需要修改 new NeuF.ScrollPage(window, {delay: 1000, marginBottom: 0}, function (offset) { if (offset > 0) { setTimeout(show,1000) } }); }); });
第三步:
要在 HTML 加入代码:
<div id="showajaxnews"> 列表加载这里面 </div>
<div id="loadmore">滚动加载更多</div>
声明:有的资源均来自网络转载,版权归原作者所有,如有侵犯到您的权益 请联系邮箱:312334557@qq.com 我们将配合处理!
原文地址:《帝国cms 下拉滚动加载更多文章》发布于2023-02-18 11:50:27