加载更多博主曾经多次折腾最终得出以下两个版本 适用于大多数项目
至于加载更多的gif 图片 请自己找素材吧
JS 调用部分 (栏目设置中 最好显示12条数据 匹配js拉取数据 且不重复 也可以自行设置测试条数)
本例按当前栏目拉取 适合列表页
<script>$(function(){ var i = 1; //设置当前页数 window.onscroll = function(){ var scrollTop = document.body.scrollTop; var bot = 50; //bot是底部距离的高度 if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) { $.ajax({ url : '/e/action/getmore.php', type:'POST', data:{"next":i,'table':'news','classid':'[!--self.classid--]','action':'getmorenews','limit':12,'small_length':120}, dataType : 'html', beforeSend:function(){ $("#loadmore").show().html('<img src="/images/loaduai.gif" width=23/> 正在努力加载中...'); $('#loadmore').attr('disabled','disabled'); }, success : function(data){ if(data){ $("#showajaxnews").append(data); $("#loadmore").removeAttr('disabled'); $("#loadmore").html('下拉加载更多'); i++; }else{ $("#loadmore").show().html("已全部加载完毕！"); $('#loadmore').attr('disabled','disabled'); return false; } } }); }}});</script>
容器和显示按钮 （showajaxnews）
<ul id="showajaxnews">[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--] </ul> <!-- 资讯列表模板 --> <a class="go-more" id="loadmore">加载更多</a>
后端数据结构 (/e/action/getmore.php)
<?phprequire('../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=12;}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=500;}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[mtitlepic]==''){ $r[mtitlepic]=$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]; $urls = sys_ReturnBqTitleLink($r); ?> <li> <a href="<?=$urls?>"> <div class="media-image"> <img src="<?=$r[mtitlepic]?>" alt="<?=$r[title]?>" width=60 height=60 /> </div> <div class="media-content"> <h3 class="title"><?=$r[title]?></h3> <p class="meta"> <span class="meta-time"><?=date("Y-m-d",$r[newstime])?></span> </p> </div> </a> </li><?php } }}db_close();$empire=null;?>
另一个版本 点击后再拉取数据 适合首页等部位按制定栏目拉取
$(function(){ var i = 1; //设置当前页数 $('#loadmore').click(function(){ $.ajax({ url : 'http://m.zhaohuati.com/e/action/getmore.php', type:'POST', data:{"next":i,'table':'news','classid':'14','action':'getmorenews','limit':12,'small_length':120}, dataType : 'html', beforeSend:function(){ $("#loadmore").show().html('<img src="/images/loaduai.gif" width=23/> 正在努力加载中...'); $('#loadmore').attr('disabled','disabled'); }, success : function(data){ if(data){ $("#showajaxnews").append(data); $("#loadmore").removeAttr('disabled'); $("#loadmore").html('点击加载更多'); i++; }else{ $("#loadmore").show().html("已全部加载完毕！"); $('#loadmore').attr('disabled','disabled'); return false; } } }); });});
注意：
next：第几页table：调用数据表limit：每次调用数量small_length：简介截取字符数length：标题截取字符数classid：调用栏目，允许多个，如1,2,3,4 特别注意，必须是调用同一数据表的栏目orderby：排序，默认是newstime，传什么就按什么来排序，如 idmyorder：正反序，默认是asc，传值怎为desc
本项目需要引入jq
博主使用的是jquery-1.8.3.min.js 使用者可以自行测试版本
不提供JQ文件
很赞哦 ()
