上滑加载(分页)


默认会先加载数据,直至撑满整个屏幕。其后上滑到底部后再次请求数据并加载
底部有固定区域时,框架会自适应,无须担心
代码(单个分页)
<div id="content" class="list-content"></div>

<script>
	// 页数(这里就是写0)
	var pageNum = 0;
	// 每次请求的数据个数
	var pageSize = 5;
	
	// 设置分页初始化属性
	javaex.setPageInit();
	// 调用上滑加载组件
	javaex.page({
		id : "content",	// 数据区域的id
		loadDataFunction : function() {
			pageNum++;
			// 拼接HTML
			var resultHtml = '';
			$.ajax({
				url : "forum/forumdisplay.json",
				type : "POST",
				dataType : "json",
				data : {
					"page" : pageNum,
					"size" : pageSize
				},
				success: function(rtn) {
					// 根据实际数据自行编写下列代码
					var length = rtn.length;
					if (length>0) {
						for (var i=0; i<length; i++) {
							resultHtml += '<div class="block">';
							resultHtml += '<div class="main">';
							resultHtml += rtn[i].date;
							resultHtml += '</div>';
							resultHtml += '</div>';
						}
					} else {
						// 如果没有数据,结束加载(需要传入数据区域的id)
						javaex.over("content");
					}
					// 建议延迟加载
					setTimeout(function() {
						// 载入数据
						$("#content").append(resultHtml);
						// 每次数据载入后,必须重置(需要传入数据区域的id)
						javaex.resetLoad("content");
					}, 1000);
				}
			});
		}
	});
</script>

代码(基于tab的多个分页)
<!--选项卡切换-->
<!--选项卡标题部分-->
<div id="tab" class="tab-title">
	<ul>
		<li>第一个分页</li>
		<li>第二个分页</li>
	</ul>
</div>
<!--选项卡内容部分-->
<div class="tab-content">
	<div>
		<!--第一个分页内容区域-->
		<div id="content1" class="list-content"></div>
	</div>
	<div>
		<!--第二个分页内容区域-->
		<div id="content2" class="list-content"></div>
	</div>
</div>

<script>
	// 第1个分页所必须的参数
	// 页数(这里就是写0)
	var pageNum1 = 0;
	// 每次请求的数据个数
	var pageSize1 = 5;
	
	// 第2个分页所必须的参数
	// 页数(这里就是写0)
	var pageNum2 = 0;
	// 每次请求的数据个数
	var pageSize2 = 5;
	
	javaex.tab({
		id : "tab",	// tab的id
		current : 1,
		callback: function (rtn) {
			var index = rtn.index;
			if (index==1) {
				// 设置分页初始化属性
				javaex.setPageInit();
				// 调用上滑加载分页组件
				javaex.page({
					id : "content1",	// 数据区域的id
					loadDataFunction : function() {
						pageNum1++;
						// 拼接HTML
						var resultHtml = '';
						$.ajax({
							url : "forum/forumdisplay.json",
							type : "POST",
							dataType : "json",
							data : {
								"page" : pageNum1,
								"size" : pageSize1
							},
							success: function(rtn) {
								// 根据实际数据自行编写下列代码
								var length = rtn.length;
								if (length>0) {
									for (var i=0; i<length; i++) {
										resultHtml += '<div class="block">';
										resultHtml += '<div class="main">';
										resultHtml += rtn[i].date;
										resultHtml += '</div>';
										resultHtml += '</div>';
									}
								} else {
									// 如果没有数据,结束加载(需要传入数据区域的id)
									javaex.over("content1");
								}
								// 建议延迟加载
								setTimeout(function() {
									// 载入数据
									$("#content1").append(resultHtml);
									// 每次数据载入后,必须重置(需要传入数据区域的id)
									javaex.resetLoad("content1");
								}, 1000);
							}
						});
					}
				});
			} else if (index==2) {
				// 设置分页初始化属性
				javaex.setPageInit();
				// 调用上滑加载组件
				javaex.page({
					id : "content2",	// 数据区域的id
					loadDataFunction : function() {
						pageNum2++;
						// 拼接HTML
						var resultHtml = '';
						$.ajax({
							url : "forum/forumdisplay.json",
							type : "POST",
							dataType : "json",
							data : {
								"page" : pageNum2,
								"size" : pageSize2
							},
							success: function(rtn) {
								// 根据实际数据自行编写下列代码
								var length = rtn.length;
								if (length>0) {
									for (var i=0; i<length; i++) {
										resultHtml += '<div class="block">';
										resultHtml += '<div class="main">';
										resultHtml += rtn[i].date;
										resultHtml += '</div>';
										resultHtml += '</div>';
									}
								} else {
									// 如果没有数据,结束加载(需要传入数据区域的id)
									javaex.over("content2");
								}
								// 建议延迟加载
								setTimeout(function() {
									// 载入数据
									$("#content2").append(resultHtml);
									// 每次数据载入后,必须重置(需要传入数据区域的id)
									javaex.resetLoad("content2");
								}, 1000);
							}
						});
					}
				});
			}
		}
	});
</script>
参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 id 数据区域的id
2 loadData <div class='load-data'> </div> 加载提示
3 noData <div class='no-data'> 没有更多内容了,亲~ </div> 没有更多内容了提示
4 loadDataFunction 请按照示例填写
演示(单个分页)
演示(多个分页)