jQuery仿手机端下拉加载获取数据,双table切换

jQuery仿手机端下拉加载获取数据,双table切换

添加时间:2021-02-17 14:58:37
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:分页
  • 模板颜色模板颜色:中级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

jQuery仿手机端下拉刷新异步获取json数据,table切换窗口。
jQuery仿手机端下拉加载获取数据,双table切换
分类:手机特效 > 分页 难易:中级
$(function(){
    var itemIndex = 0;
    var tab1LoadEnd = false;
    var tab2LoadEnd = false;
    // tab
    $(\\\'.tab .item\\\').on(\\\'click\\\',function(){
        var $this = $(this);
        itemIndex = $this.index();
        $this.addClass(\\\'cur\\\').siblings(\\\'.item\\\').removeClass(\\\'cur\\\');
        $(\\\'.lists\\\').eq(itemIndex).show().siblings(\\\'.lists\\\').hide();

        // 如果选中菜单一
        if(itemIndex == \\\'0\\\'){
            // 如果数据没有加载完
            if(!tab1LoadEnd){
                // 解锁
                dropload.unlock();
                dropload.noData(false);
            }else{
                // 锁定
                dropload.lock(\\\'down\\\');
                dropload.noData();
            }
        // 如果选中菜单二
        }else if(itemIndex == \\\'1\\\'){
            if(!tab2LoadEnd){
                // 解锁
                dropload.unlock();
                dropload.noData(false);
            }else{
                // 锁定
                dropload.lock(\\\'down\\\');
                dropload.noData();
            }
        }
        // 重置
        dropload.resetload();
    });

    var counter = 0;
    // 每页展示4个
    var num = 4;
    var pageStart = 0,pageEnd = 0;

    // dropload
    var dropload = $(\\\'.content\\\').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            // 加载菜单一的数据
            if(itemIndex == \\\'0\\\'){
                $.ajax({
                    type: \\\'GET\\\',
                 	 url: \\\'json/more.json\\\',
                    
                    dataType: \\\'json\\\',
                    success: function(data){
                        var result = \\\'\\\';
                        counter++;
                        pageEnd = num * counter;
                        pageStart = pageEnd - num;

                        if(pageStart <= data.lists.length){
                            for(var i = pageStart; i < pageEnd; i++){
                                result +=   \\\'<a class="item opacity" href="\\\'+data.lists[i].link+\\\'">\\\'
                                                +\\\'<img src="\\\'+data.lists[i].pic+\\\'" alt="">\\\'
                                                +\\\'<h3>\\\'+data.lists[i].title+\\\'</h3>\\\'
                                                +\\\'<span class="date">\\\'+data.lists[i].date+\\\'</span>\\\'
                                            +\\\'</a>\\\';
                                if((i + 1) >= data.lists.length){
                                    // 数据加载完
                                    tab1LoadEnd = true;
                                    // 锁定
                                    me.lock();
                                    // 无数据
                                    me.noData();
                                    break;
                                }
                            }
                            // 为了测试,延迟1秒加载
                            setTimeout(function(){
                                $(\\\'.lists\\\').eq(itemIndex).append(result);
                                // 每次数据加载完,必须重置
                                me.resetload();
                            },1000);
                        }
                    },
                    error: function(xhr, type){
                        alert(\\\'Ajax error!\\\');
                        // 即使加载出错,也得重置
                        me.resetload();
                    }
                });
            // 加载菜单二的数据
            }else if(itemIndex == \\\'1\\\'){
                $.ajax({
                    type: \\\'GET\\\',
                    url: \\\'json/update.json\\\',
                    dataType: \\\'json\\\',
                    success: function(data){
                        var result = \\\'\\\';
                        for(var i = 0; i < data.lists.length; i++){
                            result +=   \\\'<a class="item opacity" href="\\\'+data.lists[i].link+\\\'">\\\'
                                            +\\\'<img src="\\\'+data.lists[i].pic+\\\'" alt="">\\\'
                                            +\\\'<h3>\\\'+data.lists[i].title+\\\'</h3>\\\'
                                            +\\\'<span class="date">\\\'+data.lists[i].date+\\\'</span>\\\'
                                        +\\\'</a>\\\';
                        }
                        // 为了测试,延迟1秒加载
                        setTimeout(function(){
                            $(\\\'.lists\\\').eq(itemIndex).append(result);
                            // 每次数据加载完,必须重置
                            me.resetload();
                        },100);
                    },
                    error: function(xhr, type){
                        alert(\\\'Ajax error!\\\');
                        // 即使加载出错,也得重置
                        me.resetload();
                    }
                });
            }
        }
    });
});
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery仿手机端下拉加载获取数据,双table切换

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.095653s