迅睿cms首页及各页面实现ajax瀑布流滚动加载

滚动加载原理是当页面向下滚动时自动加载下一页数据并填充到当前页面，实现无刷新加载。注意如果开启了开发者模式，则加载完后无法显示“已经显示完了”，点击加载更多按钮也无效，关闭开发者模式即可。

引用系统JS函数类文件

将以下引用js代码放到要制作瀑布流的页面head标签内 或 header.html文件的head标签内。

<!-- 系统关键js(放在head标签内，用到了系统函数时必须引用) -->
<script src="{THEME_PATH}assets/js/cms.js" type="text/javascript"></script>
<!-- 系统关键js结束 -->

首页瀑布流滚动加载

创建index_data.html，示例代码如下

{module module=news  page=1 pagesize=10 urlrule=index.php}
<div class="">
    <a href="{$t.url}">{$t.title}</a>
</div>
{/module}

在index.html中标记显示容器div，示例代码如下

<div class="" id="content_list">
{template "index_data.html"}
</div>

在index.html页面底部写加载的js，代码如下

var Mpage=1;

//滚动显示更多
var scroll_get = true;  //做个标志,不要反反复复的加载
$(document).ready(function () {
    $(window).scroll(function () {
        if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
            scroll_get = false;
            layer.msg('内容加截中,请稍候',{time:1000});
            dr_ajax_load_more();
        }
    });
});

function dr_ajax_load_more(){
    Mpage++;
    $.get('/index.php?s=api&c=api&m=template&name=index_data.html&format=json&page='+Mpage+'&'+Math.random(),function(res){
        $('.footer-cont').hide();
        if(res.code==1){
            if(res.msg==''){
//这里的判断条件需要结合list_data.html模板来写，否则会出现无限的加载了
                layer.msg("已经显示完了",{time:500});
            }else{
                $('#content_list').append(res.msg);
                scroll_get = true;
            }
        }else{
            layer.msg(res.msg,{time:2500});
        }
    }, 'json');
}
//#content_list就是上一步提到的容器ID

搜索页瀑布流滚动加载

创建search_data.html，示例代码如下

{search module=MOD_DIR id=$searchid total=$sototal order=$params.order catid=$catid page=1 pagesize=10 urlrule=$urlrule}
<div class="">
    <a href="{$t.url}">
        {$t.title}
    </a>
</div>
{/search}

在search.html中标记显示容器div，示例代码如下

<div class="" id="content_list">
    {template "search_data.html"}
</div>

在search.html页面底部写加载的js，代码如下

var Mpage=1;

//滚动显示更多
var scroll_get = true;  //做个标志,不要反反复复的加载
$(document).ready(function () {
    $(window).scroll(function () {
        if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
            scroll_get = false;
            layer.msg('内容加截中,请稍候',{time:1000});
            dr_ajax_load_more();
        }
    });
});

function dr_ajax_load_more(){
    Mpage++;
    $.get('/index.php?s=api&c=api&m=template&name=search_data.html&module={MOD_DIR}&catid={$catid}&searchid={$searchid}&sototal={$sototal}&order={$params.order}&format=json&page='+Mpage+'&'+Math.random(),function(res){
        $('.footer-cont').hide();
        if(res.code==1){
            if(res.msg==''){
                $('#is_ajax_btn').hide();
                layer.msg("已经显示完了",{time:500});
            }else{
                $('#content_list').append(res.msg);
                scroll_get = true;
            }
        }else{
            layer.msg(res.msg,{time:2500});
        }
    }, 'json');
}
//#content_list就是上一步提到的容器ID

如果需要加载按钮，参考如下代码

<div class="" id="is_ajax_btn">
<a href="[removed]dr_ajax_load_more();" class="btn default btn-block"> 加载更多 </a>
</div>

栏目页瀑布流滚动加载

创建list_data.html，示例代码如下

{module catid=$catid order=updatetime page=1}
<div class="">
    <a href="{$t.url}">
        {$t.title}
    </a>
</div>
{/module}

在list.html中标记显示容器div，示例代码如下

<div class="" id="content_list">
    {template "list_data.html"}
</div>

在list.html页面底部写加载的js，代码如下

var Mpage=1;

//滚动显示更多
var scroll_get = true;  //做个标志,不要反反复复的加载
$(document).ready(function () {
    $(window).scroll(function () {
        if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
            scroll_get = false;
            layer.msg('内容加截中,请稍候',{time:1000});
            dr_ajax_load_more();
        }
    });
});

function dr_ajax_load_more(){
    Mpage++;
    $.get('/index.php?s=api&c=api&m=template&name=list_data.html&module={MOD_DIR}&catid={$catid}&format=json&page='+Mpage+'&'+Math.random(),function(res){
        $('.footer-cont').hide();
        if(res.code==1){
            if(res.msg==''){
                layer.msg("已经显示完了",{time:500});
            }else{
                $('#content_list').append(res.msg);
                scroll_get = true;
            }
        }else{
            layer.msg(res.msg,{time:2500});
        }
    }, 'json');
}
//#content_list就是上一步提到的容器ID

天客隆模板网管理员

扫码免费体验 GPT-4 链接