手机端滑动加载分页

html: 

<div class="title">
    <a href="javascript:history.go(-1);" class="a"><i class="icon-angle-left"></i></a>
货款充值记录
    <a href="{:U('Agency/Index/index')}" class="tx"><i class="icon-home"></i></a>
</div>

<div class="amount">
    <ul>
        <li class="status1" οnclick="getChangeList(1, 0)">未审核</li>
        <li class="status2" οnclick="getChangeList(1, 1)">已审核</li>
        <li class="status3" οnclick="getChangeList(1, -1)">已拒绝</li>
    </ul>
</div>

<!-- 中间内容 -->
<div class="amount-wrap tablelist-append"></div>
<div class="downs">已经到底啦…</div>

<!-- 总页数 -->
<input type="hidden" id="page_count">
<!-- 当前页数 -->
<input type="hidden" id="page">
<input type="hidden" id='status' name="status"/>

 

js:

<script type="text/javascript">
     $(function(){
        getChangeList(1, 0);
     });

     var is_load = true;//防止重复加载

     function getChangeList(page, status) {
        $("#page").val(page);
        $("#status").val(status);

        if(status == 0){
                $('.status1').addClass('on');
                $('.status2').removeClass('on');
                $('.status3').removeClass('on');
        }else if(status == 1){
                $('.status1').removeClass('on');
                $('.status2').addClass('on');
                $('.status3').removeClass('on');
        }else if(status == -1){
                $('.status1').removeClass('on');
                $('.status2').removeClass('on');
                $('.status3').addClass('on');
        }

        if(is_load) {
                is_load = false;
                $.ajax({
                    type:"post",
                    url : "{:U('ajaxChargeRecord')}",
                    data : {
                        'status':status,
                        "page" : page,
                    },
                    beforeSend:function(){
                        is_load = false;
                    },
                    success : function(data){
                        $("#page_count").val(data['page_count']);//总页数
                        if(page == 1){
                            var list_html = "";
                        }else if(page > 1){
                            var list_html = $('.tablelist-append').html();
                        }
                        if(data['data'].length >0 ){
                            for(var i=0;i<data['data'].length;i++){
                                    var item=data['data'][i];
                                    list_html += '<div class="coin">';
                                    list_html += '<div class="coin-left">';
                                    list_html += '<p><span>充值金额：</span><strong> '+item.pay_money+'</strong></p>';
                                    list_html += '<p><span>审核状态：</span>';
                                    if(item.status == 0){
                                        list_html += '<span style="color:#FF8C69;"> 未审核</span>';
                                    }else if(item.status == 1){
                                        list_html += '<span style="color:#666;"> 已审核</span>';
                                    }else{
                                        list_html += '<span style="color:red;"> 已拒绝</span>';
                                    }
                                    list_html += '</p>';
                                    if(item.remarks != ''){
                                        list_html += '<p><span>备注：</span> '+item.remarks+'</p>';
                                    }
                                    if(item.status != 0 && item.remarks != ''){
                                        list_html += '<p><span>拒绝原因：</span> '+item.reason+'</p>';
                                     }
                                    if(item.status != 0 && item.check_time>0){
                                        list_html += '<p><span>审核时间：</span> '+item.check_time+'</p>';
                                    }
                                    list_html += '<p><span>支付时间：</span> '+item.time+'</p>';
                                    list_html += '</div>';
                                    list_html += '<div class="coin-right">';
                                    list_html += '<p>支付截图</p>';
                                    list_html += '<p><img src="'+item.pay_img+'" alt="" οnclick="showImg(\''+item.pay_img+'\')"></p>';
                                    list_html += '</div>';
                                    list_html += '</div>';
                                }

                                    list_html += '<div class="load">加载中…</div>';
                            }else{
                                    list_html+= '<p style="color:#939393;text-align:center;margin-top:50px;font-size:24px;">Sorry！暂无相应的数据…</p>';
                            }
                            is_load = true;
                            $('.tablelist-append').html(list_html);
                        },
                        complete : function(){
                            is_load = true;
                        },
                        error : function(data){
                            console.info('error:'+data.responseText);
                        }
                });
            }
         }


     //滑动到底部加载
     $(window).scroll(function(){
            var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
            var content_box_height = parseFloat($(".tablelist-append").height());
            if(totalheight - content_box_height >= 100){
                if(is_load){
                    var page = parseInt($("#page").val()) + 1;//页数
                    var total_page_count = $("#page_count").val(); // 总页数
                    if(page > total_page_count){
                        $('.downs').show();
                        return false;
                    }else{
                        $('.load').show();
                        setTimeout(function(){
                            $('.load').hide();
                            getChangeList(page);
                        }, 500);
                    }
                }
            }
     });

</script>

 

 

php:

     public function ajaxChargeRecord() {
        $page = I('page', 1);
        $ChargeBalance = M('ChargeBalance');
        $user_id = session('managerid');
        $status = (int)I('status');
        $where = array();
        $where['user_id'] = $user_id;
        $where['status'] = $status;
        $page_size = 10;
        $start_page = $page_size * ($page - 1);

        $list = $ChargeBalance->where($where)->limit($start_page, $page_size)->order('time desc')->select();
        foreach($list as &$row){
            if($row['time'] > 0){
                $row['time'] = date('Y-m-d H:i:s', $row['time']);
            }
            if($row['check_time'] > 0){
                $row['check_time'] = date('Y-m-d H:i:s', $row['check_time']);
            }
        }
        unset($row);
        $count = $ChargeBalance->where($where)->count('id');
        $page_count = ceil($count / 10);
        $data = array(
            'data' => $list? $list:array(),
            'page_count' => $page_count
        );
        $this->ajaxReturn($data, 'json');
    }