页面内滚动条局部滚动分页div滚动事件 滚动分页 异步滚动分页 ajax滚动
来源:互联网 发布:清华同方摄像头软件 编辑:程序博客网 时间:2024/05/04 06:39
关于滚动事件参考了:http://blog.csdn.net/greenqingqingws/article/details/38018225,谢谢
关于后台的分页可以参考:http://blog.csdn.net/noteless/article/details/50176273
首先介绍下背景:
很简单就是页面内有一个div ,带有滚动条的.
需要实现的功能就是:在这个div内,响应滚动事件,并且异步加载内容.
主要思路:
页面加载后,初始化一次,
后续加载通过滚动事件响应
页面上需要有分页信息,
此处使用 隐藏域
<input type="hidden" name="pageNum" id="pageNumId" value='${pageInfo.pageNum}' autocomplete="off" /> <input type="hidden" name="pages" id="pagesId" value='${pageInfo.pages}' autocomplete="off"/><!-- 此div为操作记录容器 -动态生成的列表加载到此处--> <div class="content-scroll" id="ScrollId"> </div>
关于后台分页此处不多说
后台最后将数据传递到页面
map.put("List", List);
map.put("pageInfo", pageInfo);
页面加载后执行js
function initNotifyRecord(courseId){var _html="";var data = {}; ... data.pageNum = 1;$.ajax({type: "POST",url: root+"/web/xxxx.do",data:data,success: function(result){ $.each(result.List, function(index, item){ _html+='...........' +'......' });//容器添加内容,内容由js拼接而成 $("#ScrollId").html(_html);//分页信息存入隐藏域 $("#pageNumId").val(result.pageInfo.pageNum); $("#pagesId").val(result.pageInfo.pages); }, error : function() { } }); }js执行结束后,隐藏域已经被设置页码以及当前页信息
容器也被数据填充
后续的数据加载就是响应滚动事件
$("content-scroll").scroll(function() {//var $this =$(this), viewH = $(this).height();//可见高度 contentH = $(this).get(0).scrollHeight;//内容高度 scrollTop = $(this).scrollTop();//滚动高度 var stop = true;if (scrollTop == (contentH - viewH)) {// 这里加载数据.. var _html = '';var data = {}; // 查询参数var container = $("#ScrollId"); // 加载容器 // 当前页 var pageNum = parseInt($("#PageNumId").val());//总页数var pages = parseInt($("#PagesId").val());if (pages == pageNum) {//不加载stop = false;return;} else {pageNum = pageNum + 1;}if (stop == true) {stop = false;data.pageNum = pageNum;$.ajax({type : "POST",url : root+ "/web/xxx.do",data : data,success : function(result) {_html = '';$.each(result.List,function(index,item) {_html += '........'});//判断总页数和当前页数var totalPage = result.pageInfo.pages;var currentPage = result.pageInfo.pageNum; //根据再次的查询信息,把分页信息写入 $("#pageNumId").val(currentPage);$("#pagesId").val(totalPage);container.append(_html);stop = true;},error : function() {}});}}});
这样子就实现了,滚动加载原理很简单
页面存入页码信息(通过隐藏域)
响应滚动事件,根据页码,重新请求页码
请求到的数据append到div内
0 0
- 页面内滚动条局部滚动分页div滚动事件 滚动分页 异步滚动分页 ajax滚动
- 滚动条分页/滚动条事件触发
- jquery滚动分页插件
- android listView滚动分页
- 手机滚动分页
- 全屏分页滚动插件
- 滚动
- 滚动
- 滚动
- 滚动
- JQuery滚动条分页加载信息
- jquery 滚动条分页加载数据
- 网页滚动条滚动事件
- 滚动事件判断滚动条
- jQuery scroll事件实现监控滚动条分页示例
- jQuery scroll事件实现监控滚动条分页示例
- jQuery scroll事件实现监控滚动条分页示例
- iOS UIScrollView中实现分页滚动--定时自动滚动分页
- PHP CURL模拟登录抓取数据
- jquery中的show()跟hide()
- linux-----安装jdk
- 程序笔记
- opencv2 mat属性type、deepth、step
- 页面内滚动条局部滚动分页div滚动事件 滚动分页 异步滚动分页 ajax滚动
- 文件操作——清空缓冲区
- HDFS(3)
- Experience Of Test One Two Three...
- GridView的使用
- 点击跳转到qq会话
- OpenCV中对Mat里面depth,dims,channels,step,data,elemSize和数据地址计算的理解 (转)
- Java NIO使用及原理分析 (一)
- python sys.path.append