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

web前端|H5教程 由于手机的携带的方便性和手机的越来越智能和移动网速越来越快，手机已经充斥着人们的生活。随着手机的流行，移动应用也快速的火了起来比如微商城、手机网页、移动APP等等。既然移动应用这么火，我们今天来讲一下怎样实现在移动网页中动态加载数据，那么我们怎么实现呢，是像pc网页那样，有个上一页和下一页还是其它的方式。其实像pc网页那样上一页和下一页肯定不行的，手机屏幕很小，不好点击同时用户体验很差，今天来给大家介绍使用

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

工作原理

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

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

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

代码实现

1）.前端代码：

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

<script src=""><script src="">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;}
			
$(function(){	query('01');//第一次加载});function query(type){	alert(type);	$.ajax({		url : "/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					  		+	''					  		+	'
'+data[i].id+'
'+data[i].time+'
'					 		+	'¥'+data[i].amount+''					  		+	'';					}			 		$("#wrapper").append(content);				}else{										for(var i=0;i<data.length;i++)					{												  content=content						  		+	''						  		+	'
'+data[i].id+'
'+data[i].time+'
'						 		+	'¥'+data[i].amount+''						  		+	'';					}			 		$("#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"});	 }

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 *  */@Controllerpublic 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 datas = new ArrayList();		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;	}}

页面效果

刚进入页面时内容：

第一次滑动到底部上滑加载的内容：

第二次滑动到底部上滑加载的内容：