加载信息,先从数据库取出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>