加载信息,先从数据库取出5条实现分页,鼠标向上滑动触发Ajax再加载5条,达到异步刷新,优化加载。。。

php数据库取数据

<?php 
        include("conn1.php");
        include('../function/functions.php');
        $page=intval($_GET['page']);
        $page=$page==0?1:$page;
        $page_size=5;
        $limit = (($page - 1) * $page_size) . "," . $page_size;
        $sql="select *from v9_news where catid=182 and status=99 order by inputtime desc limit $limit"; 
      

         $result=mysqli_query($link,$sql); 
         $arr=array();
         $item=array();
         while($row=mysqli_fetch_assoc($result)){
             $row['inputtime']= date('m-d',$row['inputtime']);
             $row['updatetime']= date('m-d',$row['updatetime']);
              $arr[]=$row;
         }   
         $item['page']=$page;
         $item['item']=$arr; 
         $json=json_encode($item,JSON_UNESCAPED_UNICODE);
         echo $json;
        

jquery及ajax实现滑动请求加载

  function  onload1(url,a){
                    $.ajax({
                            type: "get",
                            url: url,
                            dataType: "json",
                            data: {
                                page:0,
                            },
                            success: function(data) {
                                $(a).html(makehtml0(data));
                           
                            },
                            error: function(i) {
                                alert("网络错误");
                            }
                        });
                 }
   function scroll1(url){
             var page=2;
            var old=0;
            var a=true; //开关定时器的作用   
             //向下滑动
            $("#item1mobile").scroll(function() {
                var $this = $(this),
                    viewH = $(this).height(), //可见高度312
                    contentH = $(this).get(0).scrollHeight, //内容高度422
                    scrollTop = $(this).scrollTop(); //滚动高度
                if(scrollTop > old) {
                    if(scrollTop / (contentH - viewH) >= 0.80) { //到达底部80%时,加载新内容
                        if(a){
                        $.ajax({
                            type: "get",
                            url: url,
                            dataType: "json",
                            data: {
                                page:page,
                            },
                            success: function(data) {
                                $('#item1mobile').append(makehtml0(data));
                                page=data.page+1;
                                a=true;

                            },
                            error: function(i) {
                                alert("网络错误");
                                a=true;
                            }
                        });
                    }
                    a=false;
                }
            }
                //上滑
                old = scrollTop
            });

  }
     var makehtml0 = function (data) {
            var html = '';
            for (var i = 0; i < data.item.length; i++) {
                
                html+="<div class='row'>"+"<a href='detail/legaldetail.php?id=" + data.item[i].id
                + "'>"+" <div class='col-xs-12 content'>"+"<div class='col-xs-12 title'>"
                +data.item[i].title+"</div>"+" <div class='col-xs-4 date'>"
                +data.item[i].inputtime+"</div>"+"</div>"+"</a>"+
                "</div>"+"<div class='fenge111'>"+"</div>";

            }
            return html;
        };

html页面

 <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
            
 </div>







<script src="./js/jquery.js"></script>
<script type="text/javascript">
             onload1('http://www.zbgh.org.cn/appUnion/data/legal-data-1.php','#item1mobile');
            scroll1('http://www.zbgh.org.cn/appUnion/data/legal-data-1.php');
</script>

 

posted @ 2016-08-12 17:21  骏码信息  阅读(1564)  评论(0编辑  收藏  举报