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

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

移动应用也快速的火了起来比如微商城、手机网页、移动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();
%>













		
	

 2）.后端代码

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

ViiTor AI

一个强大的多语言AI语音合成和视频转译平台

下载

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 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;
	}
}

页面效果

刚进入页面时内容：

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

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

以上就是 spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果的内容，更多相关内容请关注PHP中文网（www.php.cn）！