帝国列表页无限加载方法

第一步骤:

粘贴以下代码放置新建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代码可在自己的服务器下也可以引入远程的。我引的是远程的  

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

我采用的是栏目新建静态页面方式做的。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>[!--pagetitle--]</title>

<meta name="keywords" content="[!--pagekey--]" />

<meta name="baidu-site-verification" content="PzAToy3UMM" />

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name='apple-touch-fullscreen' content='yes'>

<link href="[!--news.url--]skin/default/css/mui.min.css" rel="stylesheet" type="text/css" />

<link href="[!--news.url--]skin/default/css/app.css" rel="stylesheet" type="text/css" />

<style>

.xs-name {

font-size: 16px !important;

color: #666 !important;

margin: 10px 0;

}

.mui-table-view-cell>a:not(.mui-btn) {

white-space: normal;

text-align: left;

}

.mui-table-view .mui-media-object {

max-width: 60px !important;

height: 49px !important

}

.classimg img {

width: 100%

}

.mui-card {

border-radius: 8px;

margin: 16px 20px;

box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

}

.mui-card-content-inner {

padding: 10px 16px 6px 16px

}

</style>

</head>

<body>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>

$(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: 'http://diguo.bailianyu.com/e/action/get_news_index.php',//自己的域名

                type: 'POST',

                data: {

                    "next": i,

    'table': 'chengyu',// 这里是我的数据表

                    'classid':'11',//这里是我id

                    '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)

            }

        });

    });

});

</script>

<div id="showajaxnews">

列表加载这里面

</div>

<div id="loadmore">滚动加载更多</div>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容