HTML5商城开发一 楼层滚动加载数据
对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下
场景: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商城开发一 楼层滚动加载数据的更多相关文章
- vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
- jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
- 基于jquery鼠标或者移动端滚动加载数据
基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...
- h5页面列表滚动加载数据
h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...
- PHP+InfiniteScroll实现网页无限滚动加载数据实例
PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...
- Vue无限滚动加载数据
Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载,js和jquery实现都不复杂都是既然AngularJS提供现成的我们怎么不用昵. ng-infinite-scroll.js这个组件则可以实 ...
- infinite-scroll插件无限滚动加载数据的使用
网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...
- 【无限滚动加载数据】—infinite-scroll插件的使用
网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...
随机推荐
- 网络初见&网络监测
这里需要下载一个第三方 Reachability-master 大家可以百度一下 下载之后把 Reachability拖进来 具体代码如下 #import "ViewController.h ...
- IOS设计模式-观察者模式
前言:23种软件设计模式中的观察者模式,也是在软件开发中,挺常用的一种设计模式.而在苹果开发中,苹果Cocoa框架已经给我们实现了这个设 计模式,那就是通知和KVO(Key-Value Observi ...
- 通过dubbo暴露接口调用方法,及基于zookeeper的dubbo涉及配置文件
现在很流行的Dubbo很多朋友都听说过吧,最近我也在看这方面的东西,分享先我的心得笔记. 先说说我们团队要做的项目框架,很简单重在实现基于zookeeper的dubbo注册. 框架:springmvc ...
- XMLA连接器--免费但不开源通过ODBO、XMLA
XMLA 连接器(驱动) :来自ARQUERY http://jaist.dl.sourceforge.net/project/xmlaconnect/XMLA_Provider_v1.0.0.1 ...
- db2简单语句记录
db2start db2 connect reset 断开连接 db2 drop db xxx 删除数据库 db2 list tables 查看表 db2 create database xxx 建立 ...
- MYSQL-GroupCommit
组提交(group commit)是MYSQL处理日志的一种优化方式,主要为了解决写日志时频繁刷磁盘的问题.组提交伴随着MYSQL的发展不断优化,从最初只支持redo log 组提交,到目前5.6官方 ...
- apache如何设置http自动跳转到https
如何设置http自动跳转到https?apache环境下,配置好https后,需要设置url重定向规则,使网站页面的http访问都自动转到https访问. 1.先打开url重定向支持1)打开Apach ...
- 在JavaScript和C#中获得referer
1. JavaScript /** * 获取HTTP请求的Referer * @ishost 布尔类型 Referer为空时是否返回Host(网站首页地址) */ function get_http_ ...
- 论Top与ROW_NUMBER读取第一页的效率问题
10.29 前一段时间研究关于分页的问题,由于数据库属于百万级的,考虑了关于优化方面的问题.其中一个考虑是:第一页展现的频率肯定是最高的,所以我想第一页就使用Top N来读取. 这个想法本身是没有错, ...
- my_log
//功能:定时向文件中写入时间,如果进程终止,下次打开同一个文件会继续之前的编号书写 #include<stdio.h> #include<time.h> int main(i ...