• 使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据


    <div class="bus-nav-bar ft12">
        <div class="navt bor-r-c pos-rel {if $int == 0}fwbold{/if}"><a href="portal.php?mod=merchant&action=voucherlist&int=0">全部订单</a><em class="pos-abs"></em></div>
        <div class="navt bor-r-c pos-rel {if $int == 7}fwbold{/if}"><a href="portal.php?mod=merchant&action=voucherlist&int=7">最近7天订单</a><em class="pos-abs"></em></div>
        <div class="navt pos-rel {if $int == 30}fwbold{/if}"><a href="portal.php?mod=merchant&action=voucherlist&int=30">最近一个月订单</a><em class="pos-abs"></em></div>
    </div>
    <div class="bus94 m-0-auto" id="vlist">
        <ul class="busbox ft12">
            <li class="headh2">消费确认码:<span class="checkcode"></span></li>
            <li class="headh2">电 子 串 码:<span class="password"></span></li>
            <li class="headh2">商 品 名 称:<span class="productname"></span></li>
            <li class="headh2">商 品 价 格:¥<span class="price"></span></li>
            <li class="headh2">验 证 时 间:<span class="checktime"></span></li>
        </ul>
        <div id="get_more" class="txtcent button ft12">更多</div>
    </div>
    
    <script type=text/javascript src="{STATICURL}js/mobile/jquery.more.js"></script>
    <script type="text/javascript">
        jQuery(function() {
            jQuery('#vlist').more({
                "url": 'portal.php?mod=ajax&do=mvoucher',
                "data":{"int":"{$int}"},
                "template": ".busbox",
                "trigger": "#get_more"
            });
        });
    </script>
    

      

    php代码

    //手机商户已验证代金券列表
        $int = intval($_GET['int']);
        $int = in_array($int, array(0,7,30)) ? $int : 0;
        $params = null;
        if($int == 7){
            $params = array('starttime'=>date("Y-m-d",strtotime("-7days")));
        }elseif($int == 30){
            $params = array('starttime'=>date("Y-m-d",strtotime("-30days")));
        }
        $last = intval($_GET['last'])/5 + 1;
        $data = merchant_checked_list(107, $params, 5, $last);
        if($data && $data['data']){
            foreach($data['data'] as $key => $value){
                $data['data'][$key]['password'] = decrypt($value['password']);
                $data['data'][$key]['price'] = deal_money($value['price']);
                $data['data'][$key]['checktime'] = date('Y-m-d H:i:s', $value['checktime']);
            }
            echo json_encode($data['data']);
        }
    

      jquery.more.js

    /**
     * 调用参数,方法如:$('#more').more({'url': 'data.php'});
     * amount  :'10'           每次显示记录数
     * url :'comments.php'     请求后台的地址
     * data:{},                自定义参数
     * template:'.single_item' html记录DIV的class属性
     * trigger :'#get_more'    触发加载更多记录的class属性
     * scroll  :'false'        是否支持滚动触发加载
     * offset  :'100'          滚动触发加载时的偏移量
     */
    (function($) {
        var target = null;
        var template = null;
        var lock = false;
        var variables = {
            'last': 0
        };
        var settings = {
            'amount': '8',
            'url': '',
            'template': '.single_item',
            'data':{},
            'trigger': '#get_more',
            'scroll': 'false',
            'offset': '100'
        };
        var methods = {
            init: function(options) {
                return this.each(function() {
                    if (options) {
                        $.extend(settings, options);
                    }
                    template = $(this).children(settings.template).wrap('<div/>').parent();
                    template.css('display', 'none');
                    $(this).append('<div class="loading ft12" id="waitbox"><img src="/static/m/images/loading.gif" width="19" height="19" />载入中..</div>');
                    $(this).children(settings.template).remove();
                    target = $(this);
                    if (settings.scroll == 'false') {
                        $(this).find(settings.trigger).bind('click.more', methods.get_data);
                        $(this).more('get_data');
                    } else {
                        if ($(this).height() <= $(this).attr('scrollHeight')) {
                            target.more('get_data', settings.amount * 2);
                        }
                        $(this).bind('scroll.more', methods.check_scroll);
                    }
                });
            },
            check_scroll: function() {
                if ((target.scrollTop() + target.height() + parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false) {
                    target.more('get_data');
                }
            },
            remove: function() {
                target.children(settings.trigger).unbind('.more');
                target.unbind('.more');
                target.children(settings.trigger).remove();
            },
            add_elements: function(data) {
                var root = target;
                var counter = 0;
                if (data) {
                    $(data).each(function() {
                        counter++;
                        var t = template;
                        $.each(this, function(key, value) {
                            if (t.find('.' + key))
                                t.find('.' + key).html(value);
                        });
                        if (settings.scroll == 'true') {
                            root.children('.more_loader_spinner').before(t.html());
                        } else {
                            root.children(settings.trigger).before(t.html());
                        }
                        root.children(settings.template + ':last').attr('id', 'more_element_' + ((variables.last++) + 1));
                    });
                } else {
                    methods.remove();
                }
                target.children('.more_loader_spinner').css('display', 'none');
                if (counter < settings.amount)
                    methods.remove();
            },
            get_data: function() {
                var ile;
                lock = true;
                target.children(".more_loader_spinner").css('display', 'block');
                $(settings.trigger).css('display', 'none');
                if (typeof (arguments[0]) == 'number')
                    ile = arguments[0];
                else {
                    ile = settings.amount;
                }
                var postdata = settings.data;
                    postdata['last'] = variables.last;
                    postdata['amount'] = ile;
                $.post(settings.url, postdata, function(data) {
                    $(settings.trigger).css('display', 'block');
                    methods.add_elements(data);
                    lock = false;
                    $("#waitbox").remove();
                }, 'json');
            }
        };
        $.fn.more = function(method) {
            if (methods[method])
                return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1));
            else if (typeof method == 'object' || !method)
                return methods.init.apply(this, arguments);
            else
                $.error('Method ' + method + ' does not exist!');
        }
    })(jQuery)
    

      

  • 相关阅读:
    【[CQOI2015]选数】
    杜教筛
    【[CQOI2009]跳舞】
    【简单的数学题】
    【[SDOI2013]泉】
    【[AHOI2013]差异】
    【[HEOI2016/TJOI2016]序列】
    【[SDOI2008]Sandy的卡片】
    linux系统编程之信号(一)
    linux系统编程之进程(五)
  • 原文地址:https://www.cnblogs.com/freespider/p/3836738.html
Copyright © 2020-2023  润新知