专注WEB开发 分享经验,沉淀知识

tab页面的布局和效果实例(二)

 作者:chenxing  时间:2018-02-01 18:52  阅读:193  评论:

今天继续第二部分的梳理——tab页数据加载。没加数据tab页面只是一张壳,加了数据才有了灵魂,才是一个有血肉的tab页面。可以直接上项目

昨天梳理了tab页面布局的第一部分“tab页面的布局和效果实例(一)

今天继续第二部分的梳理——tab页数据加载。没加数据tab页面只是一张壳,加了数据才有了灵魂,才是一个有血肉的tab页面。可以直接上项目。

tab数据加载有两种选择。

  1. 一次性加载所有tab数据

  2. 点击哪个tab就加载哪个数据

这两种方式各有利弊。我的项目是选择第一种方式加载的tab数据。

我们先分析一下各个tab项的相同点和不同点。这个分析很重要,会让你的代码变的简洁不冗余。

相同点:

  1. 都需要ajax请求
  2. 都需要分页面加载——加载更多

不同点:

  1. 加载的数据不同——请求不同的接口 ;
  2. tab项中的列表样式不一样

基于上面的分析,我们的加载数据的js代码可以这样写:

function loadData(type, param) {
    var types = {
        inCard:{
            id:'#inCard',
            param:(function () {
                param = param || {};
                return $.extend({
                    pageSize:20,
                    pageNumber:1,
                },param)
            })(),
            api:Global.api.buyCardList,
            html:function (data, param) {
                var html = '';
                $.each(data.rows, function (k,v) {
                    html += '<li>'+
                            '<div class="li-desc">进卡'+v.room_card+'张</div>'+
                                '<div class="li-desc">'+
                                '<p>'+v.buy_time+'</p>'+
                                '<p class="'+(v.room_card_bonus?'':'hide')+'" >其中赠送'+v.room_card_bonus+'</p>'+
                                '<p class="" >订单状态:'+v.status+'</p>'+
                            '</div>'+
                        '</li>';
                })
                $('#inCard ul').append(html);
            }
        },

        giveCard:{
            id:'#giveCard',
            param:(function () {
                param = param || {};
                return $.extend({
                    pageSize:20,
                    pageNumber:1,
                },param)
            })(),
            api:Global.api.userCardList,
            html:function (data, param) {
                var html = '';
                $.each(data.rows, function (k,v) {
                    html += '<li>' +
                        '<div class="li-desc">玩家ID:'+v.user_id+'</div>\n' +
                        '<div class="li-desc">\n' +
                        '<p>'+v.time+'</p>\n' +
                        '<p>充卡'+v.room_card+'成功</p>\n' +
                        '</div>\n' +
                        '</li>'
                })
                $('#giveCard ul').append(html);
                $('#giveCard .total-value').html(data.room_card_collect);
            }
        },

    var t = types[type];

    //执行loaddata函数清空数据
    $(t['id'] + ' ul').html('');

    if (!window.layLoading) {//显示loading加载效果layerLoading自定义封装的layer加载效果
        window.layLoading = layerLoading();
    }

    var ajax = function (types) {
        $.ajax({
            type:'get',
            async:true,
            url:t['api'],
            data:t['param'],
            success:function (res) {
                layer.close(window.layLoading);
                window.layLoading = null;

                if (res) {
                    if (res.rows.length == 0) {
                        $(t['id'] + ' .more-data').hide();
                        if (res.total == 0) {
                            $(t['id'] + ' ul').html('<li style="text-align:center;display: block">暂无数据O(∩_∩)O</li>');
                        }
//                            return;
                    }
                    if (res.rows.length < res.total) {
                        $(t['id'] + ' .more-data').show();
                        if (res.rows.length < t['param']['pageSize']) {
                            $(t['id'] + ' .more-data').hide();
                        }
                    }
                    t['html'](res, t['param']);
                    t['param']['pageNumber'] += 1;
                    return;
                }

                layerMsg(res.data);
            }
        })
    }

    ajax(types);
    $('.more-data').click(function () {
        ajax(types);
    })

}

我们把不同的地方封装到了types对象中,把相同的写在了外面。以上的就写了两个tab项,如果想继续添加三个或者更多项的tab只需要在 types对象里添加一个模块,types外面相同的逻辑代码不用变。

一个好的函数封装可以满足不同的场景调用,不会因为场景的不同而需要改变内部函数。上面封装的函数基本可以满足不同的场景调用。

下面列了两种使用场景:

//1.打开tab页就加载数据:
loadData('giveCard');
loadData('inCard');

//1.点击查询加载tab页数据
$('.btn-query').click(function () {
    var timegap_start = $('#timegap-start').val();
    var timegap_end = $('#timegap-end').val();
    var param = {
        'user_id':$('#user_id').val(),
        'timegap': timegap_start + '-' + timegap_end,
    }
    loadData('giveCard', param);
    loadData('inCard', param);
})

以上代码仅供参考,重要的了解js的设计模式。

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/124.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  176

PHP字符串转数组的三种场景

 2018-05-05 01:32  217

PHP如何遍历字符串?

 2018-05-04 00:56  1444

api接口常见的安全问题和解决方案

 2018-05-03 23:20  1051

 最新评论

 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例