Spring mvc+HTML 5モバイル端末の下部スライドアップ非同期ロードによるより多くのコンテンツのページング効果を実現
携帯電話の持ち運びの便利さと携帯電話のスマートさとモバイルネットワークの速度がますます速くなっているため、携帯電話はすでに人々の生活にあふれている.携帯電話の流行に伴い、
モバイルアプリも急速に火をつけた.例えば、マイクロショッピングモール、携帯電話のホームページ、モバイルアプリなどだ.モバイルアプリケーションがこんなに火をつけている以上、今日はどのように移行を実現するかについてお話しします.
動ページにデータを動的にロードするには、pcページのように、前のページと次のページがあるのか、それとも他の方法があるのかをどのように実現します.
実はpcのホームページのように前のページと次のページはきっとだめで、携帯電話のスクリーンはとても小さくて、クリックしにくい同時にユーザーの体験はとても悪くて、今日みんなに使用を紹介します
Spring mvc+HTML 5は、移動端の下部を非同期でより多くのコンテンツのページング効果をロードする方法を実現します.
さぎょうげんり
ページが最後までスライドすると、ユーザが上にスライドし、zeptoがイベントを傍受し、より多くのコンテンツをロードする方法を実行する.この方法ではjqueryの
$.ajaxはwebサービス側に非同期要求を開始し、webサービス側は非同期要求を受信した後、データのクエリーと処理を行い、結果を返し、ページ側の
$.ajaxは戻りデータを受信し、データの分析と処理を以前のページデータの後ろに追加します.これが動作原理全体です.
コード実装
1).フロントエンドコード:
フロントエンドコードはjqueryとzeptoを使用する必要があります.皆さんはネット上で自分でダウンロードします.次はページのコードです.
2).バックエンドコード
バックエンドコードは、ページへの初期化方法indexと非同期クエリーデータの方法queryに分けられ、具体的なコードは以下の通りである.
Webコントローラコード:
データdtoコード:
ページ効果
ページに入ったばかりのときの内容:
1回目のスライドアップロード内容:
2回目のスライド底部にスライドロードされた内容:
注意:demoコード全体を私のコード空間にアップロードしました.必要な友达がここからダウンロードできます.
Spring mvc+HTML 5モバイル端末の下部スライドアップ非同期ロードによるより多くのコンテンツのページング効果を実現
モバイルアプリも急速に火をつけた.例えば、マイクロショッピングモール、携帯電話のホームページ、モバイルアプリなどだ.モバイルアプリケーションがこんなに火をつけている以上、今日はどのように移行を実現するかについてお話しします.
動ページにデータを動的にロードするには、pcページのように、前のページと次のページがあるのか、それとも他の方法があるのかをどのように実現します.
実はpcのホームページのように前のページと次のページはきっとだめで、携帯電話のスクリーンはとても小さくて、クリックしにくい同時にユーザーの体験はとても悪くて、今日みんなに使用を紹介します
Spring mvc+HTML 5は、移動端の下部を非同期でより多くのコンテンツのページング効果をロードする方法を実現します.
さぎょうげんり
ページが最後までスライドすると、ユーザが上にスライドし、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('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>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;
}
}
ページ効果
ページに入ったばかりのときの内容:
1回目のスライドアップロード内容:
2回目のスライド底部にスライドロードされた内容:
注意:demoコード全体を私のコード空間にアップロードしました.必要な友达がここからダウンロードできます.
Spring mvc+HTML 5モバイル端末の下部スライドアップ非同期ロードによるより多くのコンテンツのページング効果を実現