springmvc+HTML5实现移动端底部上滑异步加载更多内容分页效果

来源：动视网责编：小采时间：2020-11-27 15:12:59

springmvc+HTML5实现移动端底部上滑异步加载更多内容分页效果

springmvc+HTML5实现移动端底部上滑异步加载更多内容分页效果:由于手机的携带的方便性和手机的越来越智能和移动网速越来越快，手机已经充斥着人们的生活。随着手机的流行，移动应用也快速的火了起来比如微商城、手机网页、移动APP等等。既然移动应用这么火，我们今天来讲一下怎样实现在移动网页中动态加载数据，那么我们

推荐度：

点击下载本文 文档为doc格式

导读springmvc+HTML5实现移动端底部上滑异步加载更多内容分页效果:由于手机的携带的方便性和手机的越来越智能和移动网速越来越快，手机已经充斥着人们的生活。随着手机的流行，移动应用也快速的火了起来比如微商城、手机网页、移动APP等等。既然移动应用这么火，我们今天来讲一下怎样实现在移动网页中动态加载数据，那么我们

由于手机的携带的方便性和手机的越来越智能和移动网速越来越快，手机已经充斥着人们的生活。随着手机的流行，

移动应用也快速的火了起来比如微商城、手机网页、移动APP等等。既然移动应用这么火，我们今天来讲一下怎样实现在移

动网页中动态加载数据，那么我们怎么实现呢，是像pc网页那样，有个上一页和下一页还是其它的方式。

其实像pc网页那样上一页和下一页肯定不行的，手机屏幕很小，不好点击同时用户体验很差，今天来给大家介绍使用

spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果的方式。

工作原理

当页面滑动到底部时，再用户向上滑，zepto 监听到该事件，执行加载更多内容的方法。在该方法中，采用jQuery的

$.ajax向web服务端发起异步请求，web服务端接收到异步请求后，对数据的查询和处理，然后把结果返回回来，页面端的

$.ajax接收到返回数据，对数据的分析和处理并追加到以前页面数据的后面。这就是整个工作原理。

代码实现

1）.前端代码：

前端代码需要用到jquery和zepto，大家在网上自己下载，下面是页面的代码：

<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滑动到底部加载下一页内容</title>
<script src="<c:url value="/js/JQuery/jquery-1.10.0.min.js"/>"></script>
<script src="<c:url value="/js/scroll/zepto.min.js"/>"></script>
<style>
table {
	width:100%;
	padding:0 15px;
	background:#fff;
	border-collapse: collapse;
}
table td {
	padding: 6px 0;
	width:33%;
	border-bottom:1px solid #e1e1e1;
}
tr td:nth-child(2) {
	text-align: center;
}
tr td img {
	width: 24px;
	vertical-align: middle;
}
tr td:last-child {
	text-align: right;
}
td>div:first-child {
	/*margin-bottom: -6px;*/
}
td>div:last-child {
	color: #9C9C9C;
}
</style>
</head>
<body >
<input type="hidden" name="pageNo" id="pageNo" value="1" />
<div class="white" >
	<table id="wrapper">
	
	</table>
	</div>
</body>
<script>
$(function(){
	query('01');//第一次加载
});
function query(type)
{
	alert(type);
	$.ajax({
	url : "<%=path%>/query",
	data : {
	 pageNo : $("#pageNo").val()
	},
	cache : false,
	success : function(data) {
	loading=true;
	if(data==null)
	{
	
	$("#pageNo").val(parseInt($("#pageNo").val())-1);	
	}else
	{	
	var content="";
	if(type=="00")
	{
	if(data.length==0)
	{
	 $("#pageNo").val(parseInt($("#pageNo").val())-1);	
	 return "";
	}
	for(var i=0;i<data.length;i++)
	{
	 
	 content=content
	 	+	'<tr>'
	 	+	'<td><div>'+data[i].id+'</div><div>'+data[i].time+'</div></td>'
	 	+	'<td>?'+data[i].amount+'</td>'
	 	+	'</tr>';
	}
	 	$("#wrapper").append(content);
	}else{
	
	for(var i=0;i<data.length;i++)
	{
	
	 content=content
	 	+	'<tr>'
	 	+	'<td><div>'+data[i].id+'</div><div>'+data[i].time+'</div></td>'
	 	+	'<td>?'+data[i].amount+'</td>'
	 	+	'</tr>';
	}
	 	$("#wrapper").html(content);
	}
	}
	},
	error : function(){
	loading=true;
	$("#pageNo").val(parseInt($("#pageNo").val())-1);	
	_alert("查询数据出错啦，请刷新再试");
	}
	});
}
 var loading=false;
 Zepto(function($){
	 $(window).scroll(function(){
	 if(($(window).scrollTop()+$(window).height()>$(document).height()-10)&&loading){
	 loading=false;
	 $("#pageNo").val(parseInt($("#pageNo").val())+1);
	 	query("00");
	 }
	 });
	 })
	 
	 var ua = navigator.userAgent.toLowerCase();	
	 if (/android/.test(ua)) {
	$('.date>div>img:last').css({"margin-left":"-25px"});
	 }
</script>
</html>

2）.后端代码

后端代码分为进入页面的初始化方法index和异步查询数据的方法query,具体代码如下：

web控制器代码：

package com.test.web.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.test.web.dto.DataDto;
/**
 * 测试控制器
 * 
 * @author smile2014
 * 
 */
@Controller
public class TestController {
	/**
	 * 
	 * @return
	 */
	@RequestMapping("/")
	public String index() {
	return "test";
	}

	/**
	 * 查询订单列表
	 * 
	 * @param model
	 * @param openId
	 * 用户授权Id
	 * @return
	 * @throws Exception
	 */
	@RequestMapping(value = { "/query" })
	@ResponseBody
	public Object query(Model model, Integer pageNo) throws Exception {
	System.out.println("pageNo="+pageNo);
	if (pageNo == null) {
	pageNo = 1;
	}
	List<DataDto> datas = new ArrayList<DataDto>();
	for (int i = pageNo * 15; i < (pageNo + 1) * 15; i++) {
	DataDto data = new DataDto("10000" + i, "10:" + i, "17." + i);
	datas.add(data);
	}
	System.out.println("datas="+datas);
	return datas;
	}

}

数据dto代码：

package com.test.web.dto;

/**
 * 数据dto
 * 
 * @author smile2014
 * 
 */
public class DataDto {
	private String id;
	private String time;
	private String amount;

	public String getId() {
	return id;
	}

	public void setId(String id) {
	this.id = id;
	}

	public String getTime() {
	return time;
	}

	public void setTime(String time) {
	this.time = time;
	}

	public DataDto(String id, String time, String amount) {
	super();
	this.id = id;
	this.time = time;
	this.amount = amount;
	}

	public String getAmount() {
	return amount;
	}

	public void setAmount(String amount) {
	this.amount = amount;
	}
}

页面效果

刚进入页面时内容：