載入資訊，先從資料庫取出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) { //到達底部90%時,載入新內容                        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>

 

載入資訊，先從資料庫取出5條實現分頁，滑鼠向上滑動觸發Ajax再載入5條，達到非同步重新整理，最佳化載入。。。