CMS瀑布流滾動加載

注意：如果開啟了開發者模式，則加載完後無法顯示“已經顯示完了”，點選加載更多按鈕也無效，關閉開發者模式即可。

滾動加載原理是當頁面向下滾動時自動加載下一頁資料并填充到目前頁面，實作無重新整理加載。

一、用于欄目清單

1、建立目标list_data.html專門用來寫欄目分頁循環标簽的目标檔案

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

2、在list.html中标記顯示容器div

<div class="article_info" id="content_list">

    {template "list_data.html"}


</div>

預設加載了第一頁資料

3、在頁面底部寫加載的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就是（2）中的容器ID

二、用于搜尋頁面

1、建立目标search_data.html專門用來寫搜尋分頁循環标簽的目标檔案

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

2、在search.html中标記顯示容器div

<div class="article_info" id="content_list">

    {template "search_data.html"}


</div>

預設加載了第一頁資料

加載按鈕

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

3、在頁面底部寫加載的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就是（2）中的容器ID

三、用于主站首頁

1、建立目标index_data.html專門用來寫搜尋分頁循環标簽的目标檔案

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

主站時需要指定module=具體子產品目錄

2、在index.html中标記顯示容器div

<div class="article_info" id="content_list">

    {template "index_data.html"}


</div>

預設加載了第一頁資料

3、在頁面底部寫加載的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==''){
                layer.msg("已經顯示完了",{time:500});
            }else{
                $('#content_list').append(res.msg);
                scroll_get = true;
            }
        }else{
            layer.msg(res.msg,{time:2500});
        }
    }, 'json');
}

#content_list就是（2）中的容器ID

四、用于子產品首頁

1、建立目标news/module_data.html專門用來寫搜尋分頁循環标簽的目标檔案

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

2、在news/index.html中标記顯示容器div

<div class="article_info" id="content_list">

    {template "module_data.html"}


</div>

預設加載了第一頁資料

3、在頁面底部寫加載的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=module_data.html&module={MOD_DIR}&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就是（2）中的容器ID

------------

題外判斷，判斷某個div是否滾到底部

$(document).ready(function () {
      

        var nScrollHight = 0; //滾動距離總長(注意不是滾動條的長度)
       var nScrollTop = 0;   //滾動到的目前位置
       var nDivHight = $(".Main").height();
       $(".Main").scroll(function(){
         nScrollHight = $(this)[0].scrollHeight;
         nScrollTop = $(this)[0].scrollTop;
　　　　　 var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
         if(nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight) {
  //到達底部了

         }
           
   

        });


    });

CMS瀑布流滾動加載

繼續閱讀

瀑布流AJAX無重新整理加載資料清單--當頁面滾動到Id時再繼續加載資料

ListView 滾動翻頁/滾動加載（類似QQ空間滾動加載頁面）

頁面滾動動态加載資料,頁面下拉自動加載内容

uni-appGatewayWorker聊天開發web-view傳參到html移動端假設對話聊天有41條資料，10~10

圖檔異步加載和滾動加載的差別

滾動加載采集軟體-點點滑鼠就能采集任意網站資料的軟體

偶遇this之坑偶遇this之坑

一個高效的拖拽式低代碼資料可視化大屏設計平台，将圖表或頁面元素封裝為基礎元件，無需編寫代碼即可制作資料大屏，提高效率和靈

實作vue模态框進行滾動加載

移動端滾動加載資料實作

jQuery WEUI 滾動加載 tab頁效果

select2滾動加載

滾動加載_2.1學習日記：AE-小球滾動頁面加載效果第一步：建立小球，調整間隔第二步：設定小球動作第三步：給空心球設定動作關聯父級注意：大家都在看：