spring mvc +HTML5實作行動端底部上滑非同步載入更多內容分頁效果-H5教程-PHP中文網

首頁

web前端

H5教程

spring mvc +HTML5實作行動端底部上滑非同步載入更多內容分頁效果

黄舟

Feb 09, 2017 pm 03:46 PM

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();
%>
<!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
 * 
 */
@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;
	}
}

登入後複製

頁面效果

剛進入頁面時內容：

rrreee

頁面效果 spring mvc +HTML5實作行動端底部上滑非同步載入更多內容分頁效果