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('01');//第一次加载
});
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
+ '<tr>'
+ '<td><div>'+data[i].id+'</div><div>'+data[i].time+'</div></td>'
+ '<td>¥'+data[i].amount+'</td>'
+ '</tr>';
}
$("#wrapper").append(content);
}else{
for(var i=0;i<data.length;i++)
{
content=content
+ '<tr>'
+ '<td><div>'+data[i].id+'</div><div>'+data[i].time+'</div></td>'
+ '<td>¥'+data[i].amount+'</td>'
+ '</tr>';
}
$("#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"});
}
</script>
</html>Nach dem Login kopieren
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;
}
}Nach dem Login kopieren
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;
}
}Nach dem Login kopieren
Zuerst nach unten und dann nach oben schieben, um Inhalte zu laden:
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)!
