摘要:设计目的一个网站的数据非常多的时候,需要分页,方便浏览,为了方便翻页,那么我们摒弃传统的点击翻页,直接往下拉,不停地自动加载数据,这样就可以方便阅读。
设计目的
一个网站的数据非常多的时候,需要分页,方便浏览,为了方便翻页,那么我们摒弃传统的点击翻页,直接往下拉,不停地自动加载数据,这样就可以方便阅读。
设计原理通过ajax向后端接口发起翻页请求,发送页码,后端接收页码,返回json数据,前端jquery解析json并且拼接在原有的数据基础上!
代码index.html
jquery+ajax上拉加载更多
加载中加载中
点击加载更多- // 定义一个变量,等会用来控制多次触发
- var i=0;
- $(window).scroll(function(){
- //获取滚动时距离浏览器顶部的值
- var t=$(this).scrollTop();
- //获取当前窗口的高度
- var h=$(this).height();
- //获取按钮距离浏览器顶部的值
- var h1=$("#loadmore").offset().top;
- //用按钮的值-滚动条的值与窗口高度进行比较,如果小时,则表示按钮进入可视区,同时也表示滚动条即将到达底部
- if(h1-t
- //防止快速下拉时多次触发
- if(i==0){
- //改变i的值
- i=1;
- //触发点击事件
- $("#loadmore").click();
- }
- }
- });
- // 加载初始数据
- var p = 1;
- $.ajax({
- type:"get",
- url:"server.php?page=" + p,
- data:{},
- dataType:"json",
- success:function(data){
- for (var a in data){
- $("#text").append("
"+data[a].resname+"
");- $("#loading").remove();
- }
- i=0;
- },
- error:function(data){
- },
- beforeSend:function(data){
- $("#loading").append("加载中");
- }
- });
- // 加载更多
- $("#loadmore").click(function(){
- p++;
- $.ajax({
- type:"get",
- url:"server.php?page=" + p,
- data:{},
- dataType:"json",
- success:function(data){
- for (var a in data){
- $("#text").append("
"+data[a].resname+"
");- $("#loading").remove();
- }
- i=0;
- },
- error:function(data){
- $("#text").append("
"+服务器错误+"
");- },
- beforeSend:function(data){
- $("#loading").append("加载中");
- }
- });
- });
server.php
</>code
$pageCount) {
echo "[{"result":"没有了"}]";
}
// 关闭数据库连接
mysql_close($con);
?>
DEMO:戳这里
作者:TANKING
学习交流微信:face6009
网站:likeyunba.com
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101740.html
摘要:设计目的一个网站的数据非常多的时候,需要分页,方便浏览,为了方便翻页,那么我们摒弃传统的点击翻页,直接往下拉,不停地自动加载数据,这样就可以方便阅读。 设计目的 一个网站的数据非常多的时候,需要分页,方便浏览,为了方便翻页,那么我们摒弃传统的点击翻页,直接往下拉,不停地自动加载数据,这样就可以方便阅读。 设计原理 通过ajax向后端接口发起翻页请求,发送页码,后端接收页码,返回json...
摘要:预加载自定义事件第三方扩展插件涉及的,除了,其它所有手机浏览器及浏览器均无法使用,目前主要包括语音输入事件相关注意浏览器没有事件事件相关的,手机端浏览器均可使用端模拟手机浏览器也可以正常使用。 最近项目中需要使用MUI做一个视频播放的小功能。我就花时间研究了一下MUI。 MUI是一个使用JavaScript开发Android和IOS应用的前端框架。这篇文章将以知识树的形式对MUI的使用...
摘要:支持复杂页面,例如添加自定义头部和底部布局,支持横向滑动,还可以支持粘贴头部类似微信好友分组,支持不规则瀑布流效果,支持侧滑删除功能。十分方便实现复杂的布局页面,结构上层次分明,便于维护。 目录介绍 1.复杂页面库介绍 2.本库优势亮点 2.1 支持多种状态切换管理 2.2 支持添加多个header和footer 2.3 支持侧滑功能和拖拽移动 2.4 其他亮点介绍 3.如...
摘要:是一个移动端的上拉下拉加载更多的组件。因为在节点元素创建之前,必须先设定高度,否则会导致无法滚动创建完毕是指定给第一个子元素滚动,所以的上拉和下拉刷新也是追加到第一个子元素里面,其实把第一个子元素想象成为里面的就可以了。 listloading.js listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使...
阅读 1777·2021-09-26 09:55
阅读 5775·2021-09-22 15:40
阅读 2090·2019-08-30 15:53
阅读 1559·2019-08-30 11:15
阅读 1797·2019-08-29 15:41
阅读 1941·2019-08-28 18:13
阅读 3223·2019-08-26 12:00
阅读 1731·2019-08-26 10:30