Hongmu Notes
Home Program Notes Empire cms scroll to load more articles
Program Notes Empire cms

Empire cms scroll to load more articles

Empire cms scroll to load more articles

If you want to load it yourself, you need to involve PHP+JQ+AJAX:

Create a new php code get_news_index.php and upload it to /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;
?>

The second part requires writing js code 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: 'http://www.****.com/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)
            }
        });
    });
});

The third step is to add code to HTML:


<div id="showajaxnews"> 列表加载这里面 </div>

<div id="loadmore">滚动加载更多</div>
微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Related articles

Empire CMS database statement & SQL statement format

Empire CMS database statement & SQL statement format Program Notes Empire cms

Introduction to Imperial CMS extended SQL program writing, basic examples of Imperial CMS database statements & SQL statement formats: Note: The following examples are based on placing PHP files in the system root directory. Example 1: Connect to MYSQL program. (a.php)<?php require('e/class/connect.php'); //Introduce database configuration files and public function files requ…
👁 351
Empire CMS obtains the system COOKIE variable function getcvar()

Empire CMS obtains the system COOKIE variable function getcvar() Program Notes Empire cms

Get the system COOKIE variable function syntax: getcvar($var,$ecms) Description: $var: is the variable name $ecms: 0 is to set the foreground COOKIE variable, 1 is to set the background COOKIE variable. This parameter can be omitted and defaults to 0. Usage example: getcvar('mlusername'), get the user name of the front-end login member getcvar('loginu...
👁 295
Empire CMS smart label call field collection

Empire CMS smart label call field collection Program Notes Empire cms

Collect and classify all fields that support smart tag calls into Empire CMS smart tags: [e:loop={column ID/topic ID, number of items displayed, operation type, only display pictures with titles, additional SQL conditions, display sorting}] Template code content [/e:loop] Calling time: <?=date('m-d',$bqr[newstime])?> <?=dat…
👁 3749

Recommended reading

Responsive hotel rental website template 1227

Responsive hotel rental website template 1227 Practical Collection Yiyou template

This set of eyoucms responsive templates is suitable for the hotel and travel rental industries. The design style is warm and comfortable, and can display the hotel environment, room facilities, travel rental services and online bookings. It helps hotel rental companies attract tourists online and enhance brand awareness. Template display Installation instructions Website backend: /login.php Account: admin Password: admin Related articles Yiyou CMS installation FAQ summary Yiyou CMS (…
👁 46
(Adaptive mobile version) Responsive home appliance website template – Download small household appliance website source code: 0969

(Adaptive mobile version) Responsive home appliance website template – Download small household appliance website source code: 0969 Practical Collection pbootcms Template

A responsive website template for home appliances and small household electronics, compatible with both PC and WAP devices. Featuring a modern and practical design style, it is ideal for showcasing appliance products, brand stories, and promotional campaigns. This template helps home appliance brands attract online consumers and enhance their brand awareness. Template Preview | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn | Related Articles...
👁 60
In Traditional Chinese Medicine, what is "kèjǐ"?

In Traditional Chinese Medicine, what is "kèjǐ"? Hobbies Traditional Chinese Medicine Terminology

In Traditional Chinese Medicine (TCM) theory, cough with palpitations is generally regarded as a comprehensive manifestation of symptoms such as "cough with dyspnea," "palpitations," or "chest pain." TCM posits that this condition arises when internal pathogenic factors—such as phlegm retention, blood stasis, or heat accumulation—congregate in the lungs or heart, leading to obstruction of the qi flow in these organs. The key to treating cough with palpitations lies in eliminating these internal pathogenic factors, unblocking the qi mechanism, and promoting blood circulation to resolve stasis, thereby alleviating symptoms including coughing, dyspnea, palpitations, or chest pain. TCM approaches for managing cough with palpitations include acupuncture, herbal medicine, tuina massage, and other therapeutic techniques.
👁 164
Responsive boutique gourmet specialty soup cup website template 1228

Responsive boutique gourmet specialty soup cup website template 1228 Practical Collection Yiyou template

An eyoucms responsive website template targeting the fine food and specialty soup cup industries. The design style is delicious and can display special dishes, soup cups, brand stories and store images. It helps catering brands attract diners online and enhance brand awareness. Template display Installation instructions Website backend: /login.php Account: admin Password: admin Related articles Yiyou CMS installation FAQ summary Yiyou...
👁 56
(Adaptive Mobile Version) Responsive High-End Bathroom Product Website Template – 0970

(Adaptive Mobile Version) Responsive High-End Bathroom Product Website Template – 0970 Practical Collection pbootcms Template

A responsive, high-end bathroom product website template based on PbootCMS, compatible with both PC and WAP devices. Featuring a modern, luxurious design style, it is ideal for showcasing premium bathroom products, spatial designs, and brand identities. This template helps bathroom brands attract designers and high-end customers online. Template Preview | Installation Instructions | Website Admin Panel: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn | Related Articles: Pb...
👁 50