+ 收藏我们

网站模板

网站模板搜索
404模板 营销型模板 外贸网站模板 单页模板 双语模板 标签大全
电话:18630701785
首页 > 站长学院 > 帝国cms 列表下拉滚动自动加载更多文章的方法 >

帝国cms 列表下拉滚动自动加载更多文章的方法

时间:2024-07-12 09:20:07

想要自己加载得要涉及到PHP+JQ+AJAX:

第一步:新建个php代码get_news_index.php 上传到 /e/action:

  1. <?php
  2. require('../class/connect.php');
  3. require('../class/db_sql.php');
  4. require('../data/dbcache/class.php');
  5. if($_POST[action] == 'getmorenews'){
  6. $table=htmlspecialchars($_POST[table]);
  7. if(empty($_POST[orderby])){$orderby='newstime';}else{ $orderby=htmlspecialchars($_POST[orderby]);}
  8. if(empty($_POST[myorder])){$myorder='desc';}else{ $myorder='asc';}
  9. if(empty($_POST[limit])){$limit=3;}else{ $limit=(int)$_POST[limit];}
  10. if(empty($_POST[classid])){$where=null;}else{ $where='where classid in('.$_POST[classid].')';}
  11. if(empty($_POST[length])){$length=50;}else{ $length=(int)$_POST[length];}
  12. if(empty($_POST[small_length])){$small_length=120;}else{ $small_length=(int)$_POST[small_length];}
  13. $link=db_connect();
  14. $empire=new mysqlquery();
  15. $num =(int)$_POST['next'] *$limit;
  16. if($table){
  17. $sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by $orderby $myorder limit $num,$limit");
  18. while($r=$empire->fetch($sql)){
  19. if($r[titlepic]==''){
  20. $r[titlepic]=$public_r[news.url]."e/data/images/notimg.gif";
  21. }
  22. $oldtitle=stripSlashes($r[title]);
  23. $title=sub($oldtitle,'',$length);
  24. $smalltext=stripSlashes($r[smalltext]);
  25. $smalltext=sub($smalltext,'',$small_length);
  26. $classname=$class_r[$r[classid]][classname];
  27. $newsurl=$public_r[newsurl];
  28. $classurl=$newsurl.$class_r[$r[classid]][classpath];
  29. ?>
  30. <article class="excerpt excerpt-one" data-id="<?=$r[classid]?>">
  31. <header><a class="cat label label-important" href="<?=$class_r[$r[classid]]['classpath']?> "><?=$class_r[$r[classid]][bname]?><i class="label-arrow"></i></a>
  32. <h2><a href="<?=$r[titleurl]?>" title="<?=$r[oldtitle]?>"><?=$r[title]?></a></h2>
  33. <small class="text-muted"><span class="glyphicon glyphicon-picture"></span><?=$r[imgcount]?></small></header>
  34. <p class="text-muted time"><?=$r[username]?> 发布于 <?=date('Y-m-d',$r[newstime])?></p>
  35. <p class="focus"><a href="<?=$r[titleurl]?>" class="thumbnail"><img src="<?=$r[titlepic]?>" /></a></p>
  36. <p class="note"><?=$smalltext?>...</p>
  37. <p class="text-muted views">
  38. <span class="post-views">阅读(<?=$r[onclick]?>)</span>
  39. <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>
  40. <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>
  41. </article>
  42. //这部分代码添加自己的模板代码
  43. <?php
  44. }
  45. }
  46. }
  47. db_close();
  48. $empire=null;
  49. ?>

第二步要写js代码  ajaxShow.js:

  1. $(function() {
  2. var i =0; //设置当前页数
  3. if (!NeuF) var NeuF = {};
  4. NeuF.ScrollPage = function (obj, options, callback) {
  5. var _defaultOptions = {delay: 500, marginBottom: 200}; //默认配置:延迟时间delay和滚动条距离底部距离marginBottom
  6. options = $.extend(_defaultOptions, options);
  7. this.isScrolling = false; //是否在滚动
  8. this.oriPos = 0; //原始位置
  9. this.curPos = 0; //当前位置
  10. var me = this; //顶层
  11. var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);
  12. //绑定滚动事件
  13. $obj.scroll(function (ev) {
  14. me.curPos = $obj.scrollTop();
  15. if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {
  16. if (me.isScrolling == true) return;
  17. me.isScrolling = true;
  18. setTimeout(function () {
  19. me.isScrolling = false;
  20. }, options.delay); //重复触发间隔毫秒
  21. if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);
  22. }
  23. ;
  24. me.oriPos = me.curPos;
  25. });
  26. };
  27. $(function () {
  28. window.scrollTo(0, 0); //每次F5刷新把滚动条置顶
  29. function show() {
  30. $.ajax({
  31. url: 'http://www.****.com/e/action/get_news_index.php',//自己的域名
  32. type: 'POST',
  33. data: {
  34. "next": i,
  35. 'table': 'news',
  36. 'action': 'getmorenews',
  37. 'limit': 10,
  38. 'small_length': 120
  39. },
  40. dataType: 'html',
  41. beforeSend: function () {
  42. $("#loadmore").show().html('<img src="/307/skin/ecms103/images/loading.gif"/>正在努力加载中...');
  43. $('#loadmore').attr('disabled', 'disabled');
  44. },
  45. success: function (data) {
  46. if (data) {
  47. $("#showajaxnews").append(data);
  48. $("#loadmore").removeAttr('disabled');
  49. $("#loadmore").html('滚动加载更多');
  50. i++;
  51. } else {
  52. $("#loadmore").show().html("已全部加载完毕!");
  53. console.log(data);
  54. $('#loadmore').attr('disabled', 'disabled');
  55. return false;
  56. }
  57. }
  58. });
  59. };
  60. show();
  61. //marginBottom表示滚动条离底部的距离,0表示滚动到最底部才加载,可以根据需要修改
  62. new NeuF.ScrollPage(window, {delay: 1000, marginBottom: 0}, function (offset) {
  63. if (offset > 0) {
  64. setTimeout(show,1000)
  65. }
  66. });
  67. });
  68. });

第三步:要在 列表模板文件加入代码:

  1. <div class="" id="showajaxnews"> 列表加载这里面 </div>
  2. <div class="more" id="loadmore">滚动加载更多</div>

第四步:把more加载样式css加进去

  1. .more{
  2. display: inline-block;
  3. padding: 10px 80px;
  4. text-decoration: none;
  5. background-color: #ff5f33;
  6. color: #fff !important;
  7. border-radius: 50px;
  8. text-align: center;
  9. margin-bottom: 30px;
  10. margin-top: 15px;
  11. }

效果图一:

帝国cms 列表下拉滚动自动加载更多文章的方法 - 我爱模板网

  1. .more{
  2. display: none;
  3. padding: 10px 0px 25px 0px;
  4. font-weight: normal;
  5. font-size: 15px;
  6. text-align: center;
  7. font-size: 12px;
  8. color: #ccc;
  9. }

效果二:

帝国cms 列表下拉滚动自动加载更多文章的方法 - 我爱模板网

部分页面需要调整高度下:

  1. <style>
  2. html, body {height: auto;}
  3. </style>

有问题可以加入网站技术QQ群一起交流学习

本站会员学习、解决问题QQ群(691961965)

客服微信号:lpf010888

Title