HTML5商城开发一 楼层滚动加载数据
2015-12-11 09:40
417 查看
对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下
场景:HTML5,局部商品列表信息滚动(局部滚动条)
1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300)
2.滚动脚本,实现如果拉到最底部,将加载下一页显示;往回滚,不触发加载事件(重点)
整体不难,关键在于滚动事件的逻辑处理
如果是页面body的滚动条,pageHeight、showHeight、scrollHeight 与 $(document).height()、 $(window).height() 、 $(document).scrollTop()一一对应
场景:HTML5,局部商品列表信息滚动(局部滚动条)
1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300)
<div id="subCategoryScroll" style="overflow: hidden; overflow-y: scroll;"> <ul class="list-inline mb0 ml0" id="productlist"> <li>商品信息区域</li> </ul> </div>
2.滚动脚本,实现如果拉到最底部,将加载下一页显示;往回滚,不触发加载事件(重点)
var page = 1;//加载的索引 var isload = true;//设置是否终止滚动加载 var curScrollHeight = 0;//当前滚动位置 var curCount = 1;//计数器,防止滚动时重复执行加载下一页 $("#subCategoryScroll").scroll(function () { var pageHeight = $("#productlist").height(); var showHeight = $("#subCategoryScroll").height(); var scrollHeight = $("#subCategoryScroll").scrollTop(); if (curScrollHeight - scrollHeight < 10 && curScrollHeight>0) { if (curCount == 1) { page += 1; loadproducts(page); //加载新数据 } curCount++; //加载下一页后计数器+1 } if (curScrollHeight < scrollHeight) { curScrollHeight = pageHeight - showHeight;//滚动到页面底部时,重设当前滚动位置 curCount = 1; } }); function loadproducts(pageindex) { $.ajax({ url: $("#GetDataUrl").val(), data: { "currentPageIndex": pageindex, "Condition": $("#Condition").val() }, type: 'GET', dataType: 'json', timeout: 10000, async: false, success: function (resultData) { if (resultData != null) { var html = ""; if (resultData.rows == 0 && pageindex == 1) { isload = false; html = "抱歉,暂无商品!" $("#productlist").append(html); } else { $.each(resultData.rows, function (i, item) { html = '<li>内容</li>'; $("#productlist").append(html); }); if (resultData.PageTotal == pageindex) { isload = false; } } } } }); }
整体不难,关键在于滚动事件的逻辑处理
如果是页面body的滚动条,pageHeight、showHeight、scrollHeight 与 $(document).height()、 $(window).height() 、 $(document).scrollTop()一一对应
相关文章推荐
- html5 标签img学习(待更新)
- 用HTML5打造本地桌面应用
- html5基础学习(标签)
- Html5实现手机九宫格密码解锁功能
- h5+百度地图获取地理位置
- 系列文章--HTML5学习系列链接
- 使用HTML5本地 Drag和Drop API(native API)
- HTML5 背景图片自适应屏幕的大小
- HTml5 进度条实现,以及控制进度条加载速度
- webSocket应用:同步html5画布
- 内部用的html5和css3资料
- HTML5创建一个径向/圆渐变
- HTML5创建线条渐变
- HTML5 Canvas八大核心技术及其API用法
- 10款基于HTML5+CSS3实现的超酷源码动画
- html5 canvas绘制圆形进度实例
- Html5中的跨页面消息传输
- 用html5 Canvas制作一个简单的游戏 英雄抓小怪物(上)
- HTML5之File文件操作
- html5监听屏幕旋转