对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下

场景: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 = ;//加载的索引
var isload = true;//设置是否终止滚动加载
var curScrollHeight = ;//当前滚动位置
var curCount = ;//计数器,防止滚动时重复执行加载下一页
$("#subCategoryScroll").scroll(function () {
var pageHeight = $("#productlist").height();
var showHeight = $("#subCategoryScroll").height();
var scrollHeight = $("#subCategoryScroll").scrollTop();
if (curScrollHeight - scrollHeight < && curScrollHeight>) {
if (curCount == ) {
page += ;
loadproducts(page); //加载新数据
}
curCount++; //加载下一页后计数器+1
}
if (curScrollHeight < scrollHeight) {
curScrollHeight = pageHeight - showHeight;//滚动到页面底部时,重设当前滚动位置
curCount = ;
}
});
function loadproducts(pageindex) {
$.ajax({
url: $("#GetDataUrl").val(), data: { "currentPageIndex": pageindex, "Condition": $("#Condition").val() },
type: 'GET', dataType: 'json', timeout: ,
async: false,
success: function (resultData) {
if (resultData != null) {
var html = "";
if (resultData.rows == && pageindex == ) {
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商城开发一 楼层滚动加载数据的更多相关文章

  1. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

  2. jquery ajax 滚动加载数据

    jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...

  3. 基于jquery鼠标或者移动端滚动加载数据

    基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...

  4. h5页面列表滚动加载数据

    h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...

  5. PHP+InfiniteScroll实现网页无限滚动加载数据实例

    PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...

  6. Vue无限滚动加载数据

    Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...

  7. AngularJS 无限滚动加载数据控件 ngInfiniteScroll

    在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载,js和jquery实现都不复杂都是既然AngularJS提供现成的我们怎么不用昵. ng-infinite-scroll.js这个组件则可以实 ...

  8. infinite-scroll插件无限滚动加载数据的使用

    网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...

  9. 【无限滚动加载数据】—infinite-scroll插件的使用

    网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...

随机推荐

  1. iOS开发-生成随机数

    有时候我们需要在程序中生成随机数,但是在Objective-c中并没有提供相应的函数,好在C中提供了rand().srand().random().arc4random()几个函数.那么怎么使用呢?下 ...

  2. 安卓开发NDK环境搭建

    第一步preferences - android - NDK 第二步 输入ndk文件所在目录 第三步 创建文件名(右击项目,阿 androidtool - add native sppuort)

  3. xcode中info.plist文件相关问题

    <一>关于提示http://访问网络不安全的解决方法 提示错误: App Transport Security has blocked a cleartext HTTP (http://) ...

  4. Web性能--TCP的构成

    前言:阅读<Web性能权威指南>摘录笔记.在这本书开篇就读到第一句话令人印象深刻: "合格的开发者知道怎么做,而优秀的开发者知道为什么那么做". 内容大纲: 1.因特网 ...

  5. Web端即时通讯技术原理详解

    前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

  6. CSS3 rgba

    复制粘贴: <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <t ...

  7. YARN中自己总结的几个关键点

    以前在Hadoop 1.0中JobTracker主要完成两项功能:资源的管理和作业控制.在集群规模过大的场景下,JobTracker 存在以下不足: 1)JobTracker 单点故障. 2)JobT ...

  8. Web环境使用相对路径发布Webservice

    常我们的Webservice服务的发布地址都将是一个相对路径,在与Spring一起使用时我们需要引入Cxf配置Webservice的schema,如jaxws,用以定义对应的Webservice. & ...

  9. iOS沙盒路径变化的说明详解

    最近用沙盒存储文件的时候发现了一个奇怪的现象,由于业务需要,我会将保存的文件绝对路径保存以便下次读取. 于是发现一个找不到的现象,即上一次保存下的绝对路径,再第二次打开app去查找的时候,发现找不到. ...

  10. lsattr, chattr

    lsattr $lsattr #查看文件的隐藏属性 $lsattr -------------e- ./bookmarks-2016-10-11.json -------------e- ./rxvt ...