Alex的博客

本博客的文章均为原创,是本人从事行业多年来所遇见一些小问题的解决心得,希望可以帮助到大家!



jquery 滚动条到底部加载更多内容(原创)

最近给公司开发OA系统 每个人的业绩统计的时候需要用到这个功能,于是网上找啊找啊,讲的都不详细,测试没有成功的。

最好找到一个能用但是不好用,会重复加载数据。然后就动手改了一下。现在用下来完全没问题。所有发上来记录一下,一是备忘,二是给需要的同学一个参考。这个功能特比是在开发瀑布流式的页面的时候会用到的,还有就是手机站和微信站 这个功能也是非常好用的。


实现效果:滚动条到底部加载下一页内容,滚动条到顶部刷新当前页面。

下面讲讲原理:

1,首先我们从数据库里面查询出来初始页面的数据,也就是第屏的数据内容。然后再前端打印出来;

2,然后通过jquery 来获取滚动条的位置,当滚动条滚动到页面底部的时候就触发jquery函数去指定的后台请求数据(请求里面包含了页码信息)。然后后台根据页码去数据库里面查询出来对应的数据条数,然后对这些数据进行数据格式化 也就是符合前端jquery接受的数据格式,然后对其转换成json格式并显示。

3,前端获取到json数据和对数据和html进行遍历 混编。形成最终的一段html代码,最后把这部分数据写入到 指定的html标签容器里面。


好了,原理讲完了。下面上干货吧!


我是用ci开发的。所有发上来的有些数据可能是ci的函数。不过不影响,你直接替换成php语法和mysql语法就可以了。

后台请求方法(控制器):


//我的微信业绩
public function perf_wx_perf(){
$uid=$_SESSION['xxxxx']['id'];
//获取传递过来的页码
$page=intval($this->input->get('page'));
$data['perf_data']=$this->alex->perf_wx_perf($page,$uid);
// echo $this->db->last_query();
if ($this->input->get('page')) {
    $da='';
    foreach ($data['perf_data'] as  $value) {
        $status='';
        $confirm='';
        if($value->perf_status=='1'){$status="已确认";}else{$status="待确认";}
        if($value->perf_confirm_status=='1'){$confirm=$value->perf_confirm_status;}else{$confirm="未审核";}
        $da[]=array(
            'years_month'=>date("Y年m月",strtotime($value->perf_years)),
            'count'=>$value->perf_quantity,
            'sum'=>$value->perf_sum,
            'time'=>$value->perf_time,
            'status'=>$status,
            'confirm'=>$confirm,
            'url'=>base_url('perf/perf_wx_perf_list/'.$value->perf_id),
            'years'=>date("Y年",strtotime($value->perf_years))
            );
    }
echo json_encode($da);
}else{

$this->load->view('admin/perf/perf_wx_perf',$data);
}
}



前端html页面


<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>我的微信业绩</title>

    <meta name="keywords" content="我的微信业绩">
    <meta name="description" content="我的微信业绩">

    <script src="/public/admin/js/jquery.min.js-v=2.1.4.js" ></script>
    <script type="text/javascript">
$(function(){
    var winH = $(window).height(); //页面可视区域高度
    var i = 1;
    $(window).scroll(function () {
        // var pageH = $(document.body).height();
        // var scrollT = $(window).scrollTop(); //滚动条top
        // var aa = (pageH-winH-scrollT)/winH;
        //如果滚动条到达底部就获取新数据追加到容器
        if($(document).scrollTop() >= $(document).height() - $(window).height()){
            $.getJSON("<?php echo  base_url('perf/perf_wx_perf');?>",{page:i},function(json){
                if(json){
                    var str = "";
                    $.each(json,function(index,array){

                         var str ="<div class='vertical-timeline-block' >";
                         var str = str + "<div class='vertical-timeline-icon navy-bg'>";
                         var str = str + "<i class='fa fa-calendar'></i>";
                         var str = str + "</div>";
                         var str = str + "<div class='vertical-timeline-content'>";
                         var str = str + "<h2>"+array['years_month']+"</h2>";
                         var str = str + "<p class='tj'>";
                         var str = str + "<span>订单数量:<label>"+array['count']+"</label>个</span>";
                         var str = str + "<span>本月合计金额:<label>"+array['sum']+"</label>元</span>";
                         var str = str + "<span>结算时间:<label>"+array['time']+"</label></span>";
                         var str = str + "<span>确认状态:<label>"+array['status']+"</label></span>";
                         var str = str + "<span>审核状态:<label>"+array['confirm']+"</label></span>";
                         var str = str + "</p>";
                         var str = str + "<a href='"+array['url']+"' class='btn btn-sm btn-primary'> 更多信息</a>";
                         var str = str + "<span class='vertical-date'>";
                         var str = str + "年份 <br>";
                         var str = str + "<small>"+array['years']+"</small>";
                         var str = str + "</span>";
                         var str = str + " </div>";
                         var str = str + "</div>";
                        $("#container").append(str);
                    });
                    i++;
                }else{
                    $(".nodata").show().html("已经没有更多内容了。。。");
                    return false;
                }
            });
            //如果滚动条达到顶部就刷新
        }else if ($(document).scrollTop() <= 0) {
                    //alert("滚动条已经到达顶部为0");
                    window.location.reload();//刷新当前页面
                }
    });
});
</script>

</head>

<body class="gray-bg">
    <div class="row">
        <div class="col-sm-12">
            <div class="wrapper wrapper-content">
                <div class="row animated fadeInRight">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">

                            <div class="" id="ibox-content">

                                <div id="vertical-timeline" class="vertical-container light-timeline">
<div id="container">
<?php foreach ($perf_data as  $value): ?>


                                    <div class="vertical-timeline-block" >
                                        <div class="vertical-timeline-icon navy-bg">
                                            <i class="fa fa-calendar"></i>
                                        </div>

                                        <div class="vertical-timeline-content">
                                            <h2><?php echo  date("Y年m月",strtotime($value->perf_years)); ?></h2>
                                            <p class="tj">
                                            <span>订单数量:<label><?php echo $value->perf_quantity;?></label>个</span>
                                            <span>本月合计金额:<label><?php echo $value->perf_sum;?></label>元</span>
                                            <span>结算时间:<label><?php echo $value->perf_time;?></label></span>
                                            <span>确认状态:<label><?php if($value->perf_status=='1'){echo "已确认";}else{echo "待确认";}?></label></span>
                                            <span>审核状态:<label><?php if($value->perf_confirm_status=='1'){echo $value->perf_confirm_uid;}else{echo "未审核";}?></label></span>
                                            </p>
                                            <a href="#" class="btn btn-sm btn-primary"> 更多信息</a>
                                            <span class="vertical-date">
                                        年份 <br>
                                        <small><?php echo  date("Y年",strtotime($value->perf_years)); ?></small>
                                    </span>
                                        </div>
                                    </div>
<?php endforeach ?>
</div>



                            </div>
    <div class="nodata" style="width: 100%;height: 50px;"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>




</body>

</html>


js代码解释


<script type="text/javascript">
$(function(){
    var winH = $(window).height(); //页面可视区域高度
    var i = 1;
    $(window).scroll(function () {
        // var pageH = $(document.body).height();
        // var scrollT = $(window).scrollTop(); //滚动条top
        // var aa = (pageH-winH-scrollT)/winH;
                 //$(document).scrollTop() 获取垂直滚动的距离                 //$(document).scrollLeft() 这是获取水平滚动条的距离 //如果滚动条到达底部就获取新数据追加到容器
        if($(document).scrollTop() >= $(document).height() - $(window).height()){
            $.getJSON("<?php echo  base_url('perf/perf_wx_perf');?>",{page:i},function(json){
                if(json){
                    var str = "";
                    $.each(json,function(index,array){

                         var str ="<div class='vertical-timeline-block' >";
                         var str = str + "<div class='vertical-timeline-icon navy-bg'>";
                         var str = str + "<i class='fa fa-calendar'></i>";
                         var str = str + "</div>";
                         var str = str + "<div class='vertical-timeline-content'>";
                         var str = str + "<h2>"+array['years_month']+"</h2>";
                         var str = str + "<p class='tj'>";
                         var str = str + "<span>订单数量:<label>"+array['count']+"</label>个</span>";
                         var str = str + "<span>本月合计金额:<label>"+array['sum']+"</label>元</span>";
                         var str = str + "<span>结算时间:<label>"+array['time']+"</label></span>";
                         var str = str + "<span>确认状态:<label>"+array['status']+"</label></span>";
                         var str = str + "<span>审核状态:<label>"+array['confirm']+"</label></span>";
                         var str = str + "</p>";
                         var str = str + "<a href='"+array['url']+"' class='btn btn-sm btn-primary'> 更多信息</a>";
                         var str = str + "<span class='vertical-date'>";
                         var str = str + "年份 <br>";
                         var str = str + "<small>"+array['years']+"</small>";
                         var str = str + "</span>";
                         var str = str + " </div>";
                         var str = str + "</div>";

                        // var str = "<div class="single_item"><div class="element_head">";
                        // var str = str + "<div class="date">"+array['date']+"</div>";
                        // var str = str + "<div class="author">"+array['author']+"</div>";
                        // var str = str + "</div><div class="content">"+array['content']+"</div></div>";
                        $("#container").append(str);
                    });
                    i++;
                }else{
                    $(".nodata").show().html("别滚动了,已经到底了。。。");
                    return false;
                }
            });
            //如果滚动条达到顶部就刷新
        }else if ($(document).scrollTop() <= 0) {
                    //alert("滚动条已经到达顶部为0");
                    window.location.reload();//刷新当前页面
                }
    });
});
</script>


要注意的就是js里面的数据的key 要和后台提供的对应。


浏览777  评论0  Alex于 2016-10-13 13:39
发言