由於手機的攜帶的便利性和手機的越來越智慧和行動網速越來越快,手機已經充斥著人們的生活。隨著手機的流行,
行動應用程式也快速的火了起來例如微商城、手機網頁、行動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('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; } }
頁面效果
剛進入頁面時內容:
rrreee頁面效果
第一次滑動到底部上滑動加載的內容:
第一次滑動到底部上滑動加載的內容:
以上就是 spring mvc +HTML5實作行動端底部上滑非同步載入更多內容分頁效果的內容,更多相關內容請關注PHP中文網(www.php.cn)!