【Jquery mobile】动态加载ListView

最新推荐文章于 2017-12-20 14:57:28 发布

我是一个小胖子

最新推荐文章于 2017-12-20 14:57:28 发布

阅读量3.1w

点赞数 1

分类专栏： Jquery Mobile 文章标签： jquery listview mobile stylesheet javascript list

本文链接：https://blog.youkuaiyun.com/actual_/article/details/7029476

版权

Jquery Mobile 专栏收录该内容

12 篇文章

订阅专栏

动态增加列表项是一个基本的功能，今天测试了一下。先贴下效果图：

点击“更多。。。”，就会增加列表项。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<meta charset="GBK" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
		<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
		<script>
			$(function() {
				$("#more").live("click", function() {
					var i = 0;
					for( i = 0; i <= 3; i++) {
						var list = $("<li><a href='http://blog.youkuaiyun.com/actual_'>新增列表项" + i + "</a></li>");
						$("#list").append(list).find("li:last").hide();
						$('ul').listview('refresh');
						$("#list").find("li:last").slideDown(300);
					}
				});
			});

		</script>
	</head>
	<body>
		<div data-role="page">
			<div data-role="header">
				<h1>maria</h1>
			</div>
			<!-- /header -->
			<div data-role="content">
				<ul data-role="listview" id="list" data-inset="true">
					<li>
						<a href="#">maria</a>
					</li>
				</ul>
			</div>
			<!-- /content -->
			<div data-role="footer" class="ui-bar">
				<a href="#" data-role="button" id="more" >更多...</a>
			</div>
			<!-- /footer -->
		</div>
		<!-- /page -->
	</body>
</html>

以下转自网络：

前言：
用智能手机和平板电脑上网看微博、文章、小说时，手指往上滑动页面，经常看到下面有“正在加载，请稍后...”。公司移动运用这块由我来搞，也有这个方面的运用需求，所以我也做了一个类似的异步加载版面的例子。

好处：
只有在用户手指滑动屏幕时才加载下一个版面的数据，一方面可以为用户节省流量；另一方面改善了第一次加载时的响应速度。

名词注解
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;
}