前言:
用智能手机和平板电脑上网看微博、文章、小说时,手指往上滑动页面,经常看到下面有“正在加载,请稍后...”。 公司移动运用这块由我来搞,也有这个方面的运用需求,所以我也做了一个类似的异步加载版面的例子。
好处:
只有在用户手指滑动屏幕时才加载下一个版面的数据,一方面可以为用户节省流量;另一方面改善了第一次加载时的响应速度。
名词注解
JQuery Mobile: 它是一个为移动设备浏览器写的一个开源js框架,官方描述:
jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
官方链接:
http://jquerymobile.com/
版面:
在IPAD上的safari浏览器,页面列表的内容如果很长的话,需要用手指向上滑动屏幕来查看下面的列表数据,一个屏幕就是一个版面啦
,当然这个不是严格意义上的版面。
本文要解决的问题:
异步加载列表内容,就是说, 刚进入页面时,加载大概两个版面的数据,然后手指向上滑动屏幕,如果手指触摸点还没有进入第二个版面则不会加载第三个版面的列表数据,当手指触摸点在第三个版面时,在页面的最下方显示“正在加载,请稍后...”,并调用jquery的ajax异步请求方法,来加载第四个版面的数据,加载完成后会移除“正在加载,请稍后...”的提示文字。
需要考虑的问题:
1、如何确定列表的版面个数?
不需要。
2、如何确定每个版面显示的记录条数?
因为列表页面的url是在后台配置的,不能将pageSize写死在URL里。而在js里计算出的pageSize是不能够作为这个URL的参数,struts2的action调用时,如果没有找到pageSize这个参数值,则默认pageSize=15,所以呢,第一次进入列表页面时,pageSize只能是15。也就是说列表页面只显示15条记录,这个在7寸的三星TP-1000平板及小于7寸的屏幕上还行。估计在大屏幕的IPAD上有点少,到时候具体考虑一下怎么定这个数。
js中计算的pageSize在AJAX异步加载版面时会作为请求的参数。比如IPAD2屏幕每个版面适合显示20条记录,则以后每个版面加载时都取20条出来。
3、如何确定是否要加载下一个版面?
手指解决进入了已经加载的版面的最后一个时,就要加载下一个版面,如何确定触点在最后一个版面呢?经过分析,可以给<li>指定id。然后就可以获取<li>元素的序号,来判断触点是在哪个版面。
<div id="mainPage" data-role="page">
<div data-role="header" data-position="inline" data-theme="b">
<h1>中间计量审批列表</h1>
<a class="ui-btn-right" href="javascript:goDesktop();" data-role="button" data-icon="back">返回桌面</a>
</div>
<div data-role="content">
<ww:if test="list.size>0">
<ul id="list" data-role="listview">
<ww:iterator value="list" status="status">
<li id="li<ww:property value="#status.index" />"><a href="javascript:toAudit('<ww:property value='id'/>')"><ww:property value="topic" />(<ww:property value="startTime" />)</a></li>
</ww:iterator>
</ul>
</ww:if>
<ww:if test="list.size==0">
不存在任何数据.
</ww:if>
</div>
</div>
/** 计算手指滑动时起始点处的DOM元素的序号 */
function getScrollPosition(event){
var target = $(event.target);
while(target.attr("id")==undefined){
target = target.parent();
}
//手指滑动触点的<li>元素的ID
var targetId = target.attr('id');
//手指滑动触点的<li>元素的序号
var position;
//手指滑动触点的Tag
var targetTag = "li";
if(targetId!=undefined && targetId.indexOf(targetTag)==0){
position = targetId.substring(targetTag.length);
}
return position;
}
- 大小: 106 KB
分享到:
相关推荐
jquery异步加载页面,适合用于选项卡页面。
使用jquerymobile移动框架,利用jquery的ajax滚动加载内容。
使用jquerymobile移动框架,利用jquery的ajax滚动加载内容。
jQuery选项卡切换图片异步加载代码是一款精简的异步加载图片代码,展示图片的网页必备的功能。
如何异步加载图片,如果图片多了,这个脚本的效果还不错..
jquery 异步加载页面小例子,可运行。
完整的jquery easyui tree 树形列表节点异步加载demo,比官方demo详细得多。是前后台交互的web应用。
jQuery mobile相册的一种样式
jquery ajax选项卡使用jQuery选项卡切换异步加载请求数据
jQuery+ajax实现一款简单实用的异步加载分页代码,支持自定义设置分页列表数量。
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
jquery ztree 异步加载 延迟加载效果
jquery mobile listview动态加载json
jQuery Mobile是jQuery框架的一个组件(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流...
jquery 图片延迟加载插件制作tab选项卡图片异步加载
1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上,如果您了解 jQuery,您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 ...
jquery实现页面的异步加载,增强客户的体验,此demo中包含了两种方式实现页面的异步加载
使用JQuery Mobile编写的简单列表实例,实例采用了两种不同的样式风格
作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...
一个美观的网页加载效果哦,兼容所有浏览器。