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

百变鹏仔 2个月前 (10-19) #H5教程

文章标签分页

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

移动应用也快速的火了起来比如微商城、手机网页、移动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(&#39;01&#39;);//第一次加载});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  		+	&#39;<tr>&#39;  		+	&#39;<td><div>&#39;+data[i].id+&#39;</div><div>&#39;+data[i].time+&#39;</div></td>&#39; 		+	&#39;<td>¥&#39;+data[i].amount+&#39;</td>&#39;  		+	&#39;</tr>&#39;;}		 		$("#wrapper").append(content);			}else{		for(var i=0;i<data.length;i++){  content=content	  		+	&#39;<tr>&#39;	  		+	&#39;<td><div>&#39;+data[i].id+&#39;</div><div>&#39;+data[i].time+&#39;</div></td>&#39;	 		+	&#39;<td>¥&#39;+data[i].amount+&#39;</td>&#39;	  		+	&#39;</tr>&#39;;}		 		$("#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)) {	$(&#39;.date>div>img:last&#39;).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 *  */@Controllerpublic class TestController {/** *  * @return */@RequestMapping("/")public String index() {	return "test";}/** * 查询订单列表 *  * @param model * @param openId *            用户授权Id * @return * @throws Exception */@RequestMapping(value = { "/query" })@ResponseBodypublic 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;}}

页面效果

刚进入页面时内容：

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

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

文章推荐

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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集