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

时间:2023-03-09 20:13:37
加载信息,先从数据库取出5条实现分页,鼠标向上滑动触发Ajax再加载5条,达到异步刷新,优化加载。。。

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

php数据库取数据

<?php
include("conn1.php");
include('../function/functions.php');
$page=intval($_GET['page']);
$page=$page==?:$page;
$page_size=;
$limit = (($page - ) * $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>