首页/XunRuiCMS/关键词/迅睿模版制作/正文

迅睿模版制作

滚动加载原理是当页面向下滚动时自动加载下一页数据并填充到当前页面，实现无刷新加载。

迅睿CMS模板实现AJAX瀑布流滚动加载/点击加载更多

XunRuiCMS 0人觉得很赞 493次 免费问技术
滚动加载原理是当页面向下滚动时自动加载下一页数据并填充到当前页面，实现无刷新加载。

迅睿函数大全迅睿基础设置迅睿二次开发迅睿模版制作迅睿缓存在线生成迅睿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==''){
               //这里的判断条件需要结合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就是（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="javascript: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==''){
//这里的判断条件需要结合list_data.html模板来写，否则会出现无限的加载了
                $('#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==''){
//这里的判断条件需要结合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就是（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==''){
//这里的判断条件需要结合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就是（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) {
  //到达底部了

         }
           
   

        });


    });

本文属原创，转载请注明原文：https://www.zhimatong.com/jiaocheng/1008.html

为保证教程的实用性及扩大知识面覆盖，如果您有相似问题而未解决，可联系在线客服免费技术支持。

内容有用

热门主题

相关阅读
关键词：

易优EyouCMS自适应国际货物物流运输公司模板源码_服务业通用源码

易优EyouCMS自适应国际货物物流运输公司模板源码_服务业通用源码

了解更多>>

最近教程

推荐专题

TAG推荐

产品与服务
功能插件 全网优惠券 素材特效 模版转换大师 模版源码 数据转换大师
快速通道
API 接口测试 CMS函数大全 PbootCMS标签大全 迅睿缓存生成 迅睿基础手册 XunruiCMS标签大全 字体图标预览 迅睿分页生成 迅睿字体图标
帮助中心
城市服务 开发外包 网站工具 TAGS
外贸独立站
微信关注
友情链接:
功能插件
模版源码
素材特效
全网优惠券

Copyright © 2011-2025 All Rights Reserved. 芝麻通 版权所有 www.zhimatong.com
豫ICP备16041652号 豫公网安备 41010502000024号 网站地图 免责声明 XML地图

联系
顾问

交流群 购物车
账号登录

没有账号？立即注册

忘记密码

登录即同意用户协议没有账号？ 立即注册
账号注册
我已阅读并同意用户协议
立即注册
注册即同意用户协议已有账号？ 立即登录
找回密码

操作步骤：邮箱验证->设置新密码

注册即同意用户协议已有账号？ 立即登录