Heim > Artikel > Web-Frontend > spring mvc +HTML5 realisiert das Hochschieben des unteren Endes des mobilen Endgeräts, um asynchron mehr Inhalte zu laden und einen Paginierungseffekt zu erzielen

spring mvc +HTML5 realisiert das Hochschieben des unteren Endes des mobilen Endgeräts, um asynchron mehr Inhalte zu laden und einen Paginierungseffekt zu erzielen

黄舟Original: 2017-02-09 15:46:223634Durchsuche

Aufgrund der Portabilität von Mobiltelefonen, ihrer zunehmenden Intelligenz und schnelleren Mobilfunknetzgeschwindigkeiten sind Mobiltelefone zu einem allgegenwärtigen Teil des Lebens der Menschen geworden. Mit der Beliebtheit von Mobiltelefonen sind

auch mobile Anwendungen schnell populär geworden, wie z. B. Micro-Malls, mobile Webseiten, mobile APPs usw. Da mobile Anwendungen so beliebt sind, werden wir heute darüber sprechen, wie man Daten dynamisch in mobile Webseiten lädt. Ist es also wie eine PC-Webseite, mit einer vorherigen Seite und einer nächsten Seite?

Tatsächlich sind die vorherige Seite und die nächste Seite wie auf PC-Webseiten definitiv nicht möglich. Der Bildschirm des Mobiltelefons ist sehr klein, schwer anzuklicken und die Benutzererfahrung ist sehr schlecht. Heute werde ich Ihnen vorstellen, wie Um

spring mvc +HTML5 zu verwenden, wird der Paging-Effekt implementiert, indem der untere Rand des mobilen Endgeräts nach oben geschoben wird, um mehr Inhalte asynchron zu laden.

So funktioniert es

Wenn die Seite nach unten gleitet und der Benutzer dann nach oben gleitet, hört Zepto das Ereignis ab und führt die Methode zum Laden weiterer Inhalte aus. Bei dieser Methode wird

$.ajax verwendet, um eine asynchrone Anfrage an den Webserver zu initiieren. Nachdem der Webserver die asynchrone Anfrage erhalten hat, fragt er die Daten ab, verarbeitet sie und gibt dann das Ergebnis zurück

$.ajax der Seite empfängt die zurückgegebenen Daten, analysiert und verarbeitet die Daten und hängt sie an die Daten der vorherigen Seite an. So funktioniert das Ganze.

Code-Implementierung

1). Seite:

2). Der Code lautet wie folgt:

Web-Controller-Code:

<%@ 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>

Daten-DTO-Code:

Seiteneffekt

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

}

Inhalt bei der ersten Eingabe die Seite:

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 realisiert das Hochschieben des unteren Endes des mobilen Endgeräts, um asynchron mehr Inhalte zu laden und einen Paginierungseffekt zu erzielen

Zuerst nach unten und dann nach oben schieben, um Inhalte zu laden:

spring mvc +HTML5 realisiert das Hochschieben des unteren Endes des mobilen Endgeräts, um asynchron mehr Inhalte zu laden und einen Paginierungseffekt zu erzielen

The Die zweite Folie nach unten wird nach oben verschoben, um den Inhalt zu laden:

Das Obige ist der Inhalt von Spring MVC + HTML5, um das Hochschieben und asynchrone Laden weiterer Inhalte zu realisieren Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php. cn)!

spring mvc +HTML5 realisiert das Hochschieben des unteren Endes des mobilen Endgeräts, um asynchron mehr Inhalte zu laden und einen Paginierungseffekt zu erzielen

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Die HTML5-Webseite des Android-Alipay-Clients kann gelegentlich nicht automatisch geschlossen werdenNächster Artikel：Die HTML5-Webseite des Android-Alipay-Clients kann gelegentlich nicht automatisch geschlossen werden

In Verbindung stehende Artikel

Mehr sehen