微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

无刷新动态加载数据 滚动条加载适合评论等页面

分类：PHP作者：编程之家AI导航网

滚屏加载更多数据,适合评论等页面 本例的数据库很简单，一看就明了

<IMG src="https://files.jb51.cc/file_images/article/201310/201310161717332.gif?201391617182"&gt;

<div class="codetitle"><a style="CURSOR: pointer" data="65192" class="copybut" id="copybut65192" onclick="doCopy('code65192')"> 代码如下:
<div class="codebody" id="code65192">
<div id="container"> <?PHP
$query=MysqL_query("select from content order by id desc limit 0,10");
while ($row=MysqL_fetch_array($query)) {
?>
<div class="single_item">
<div class="element_head">
<div class="date"><?php echo date('m-d H:i',strtotime($row['updatetime']));?>

<div class="author"><?php echo $row['id'];?>


<div class="content"><?php echo $row['message'];?>


<?php } ?>

<div class="nodata">

js文件
<div class="codetitle"><a style="CURSOR: pointer" data="56906" class="copybut" id="copybut56906" onclick="doCopy('code56906')"> 代码如下:<div class="codebody" id="code56906">
<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(aa<0.02){
$.getJSON("result.PHP",{page:i},function(json){
if(json){
var str = "";
$.each(json,function(index,array){
var str = "<div class=\"single_item\"><div class=\"element_head\">";
var str = str + "<div class=\"date\">"+array['date']+"";
var str = str + "<div class=\"author\">"+array['author']+"";
var str = str + "<div class=\"content\">"+array['content']+"";
$("#container").append(str);
});
i++;
}else{
$(".nodata").show().html("别滚动了，已经到底了。。。");
return false;
}
});
}
});
});


result.PHP
<div class="codetitle"><a style="CURSOR: pointer" data="34880" class="copybut" id="copybut34880" onclick="doCopy('code34880')"> 代码如下:<div class="codebody" id="code34880">
<?PHP
include("conn.PHP"); $page = intval($_GET['page']); //获取请求的页数
$start = $page5;
$query=MysqL_query("select * from content order by id desc limit $start,5");
while ($row=MysqL_fetch_array($query)) {
$arr[] = array(
'content'=>$row['message'],
'author'=>$row['id'],
'date'=>date('m-d H:i',strtotime($row['updatetime']))
);
}
echo json_encode($arr); //转换为json数据输出
?>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

动态加载无刷新滚动条滚动条

相关推荐

vue+thinkphp5实现微信扫码支付(NATIVE支付)
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单，返回预支付订单号的接口，目前微信支付所有场景均使用这一接口。下面介绍的是其中NATIVE的支付实现流程与PC端实现扫码支付流程
uniapp+thinkphp5实现微信扫码支付(APP支付)
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单，返回预支付订单号的接口，目前微信支付所有场景均使用这一接口。下面介绍的是其中APP的支付的配置与实现流程
uniapp+thinkphp5实现微信登录
前言 之前做了微信登录，所以总结一下微信授权登录并获取用户信息这个功能的开发流程。 配置 1.首先得在微信公众平台申请一下微信小程序账号并获取到小程序的AppID和AppSecret https://mp.weixin.qq.com/cgi-bin/loginpage?url=%2Fwxamp%2F
【PHP】关于fastadmin框架中使用with进行连表查询时setEagerlyType字段的理解
FastAdmin是我第一个接触的后台管理系统框架。FastAdmin是一款开源且免费商用的后台开发框架，它基于ThinkPHP和Bootstrap两大主流技术构建的极速后台开发框架，它有着非常完善且强大的功能和便捷的开发体验，使我逐渐喜欢上了它。
【workerman】uniapp+thinkPHP5使用GatewayWorker实现实时通讯
之前公司需要一个内部的通讯软件，就叫我做一个。通讯软件嘛，就离不开通讯了，然后我就想到了长连接。这里本人用的是GatewayWorker框架。
uniapp+thinkphp5实现微信支付(JSAPI支付)
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单，返回预支付订单号的接口，目前微信支付所有场景均使用这一接口。下面介绍的是其中JSAPI的支付实现流程
服务器优化必备：深入了解PHP8底层开发原理
服务器优化必备：深入了解PHP8底层开发原理
Golang的网络编程：如何快速构建高性能的网络应用？
Golang的网络编程：如何快速构建高性能的网络应用？
Golang和其他编程语言的对比：为什么它的开发效率更高？
Golang和其他编程语言的对比：为什么它的开发效率更高？
PHP8底层开发原理揭秘：如何利用新特性创建出色的Web应用
PHP8底层开发原理揭秘：如何利用新特性创建出色的Web应用
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native