当前位置:Gxlcms > html代码 > springmvc+HTML5实现移动端底部上滑异步加载更多内容分页效果

springmvc+HTML5实现移动端底部上滑异步加载更多内容分页效果

时间:2021-07-01 10:21:17 帮助过:66人阅读

由于手机的携带的方便性和手机的越来越智能和移动网速越来越快,手机已经充斥着人们的生活。随着手机的流行,

移动应用也快速的火了起来比如微商城、手机网页、移动APP等等。既然移动应用这么火,我们今天来讲一下怎样实现在移

动网页中动态加载数据,那么我们怎么实现呢,是像pc网页那样,有个上一页和下一页还是其它的方式。

其实像pc网页那样上一页和下一页肯定不行的,手机屏幕很小,不好点击同时用户体验很差,今天来给大家介绍使用

spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果的方式。

工作原理

当页面滑动到底部时,再用户向上滑,zepto 监听到该事件,执行加载更多内容的方法。在该方法中,采用jQuery的

$.ajax向web服务端发起异步请求,web服务端接收到异步请求后,对数据的查询和处理,然后把结果返回回来,页面端的

$.ajax接收到返回数据,对数据的分析和处理并追加到以前页面数据的后面。这就是整个工作原理。

代码实现

1).前端代码:

前端代码需要用到jquery和zepto,大家在网上自己下载,下面是页面的代码:

  1. <%@ page language="java" import="java.util.*"
  2. contentType="text/html; charset=UTF-8"%>
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  4. <%@ page pageEncoding="UTF-8"%>
  5. <%
  6. String path = request.getContextPath();
  7. %>
  8. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  9. <html xmlns="http://www.w3.org/1999/xhtml">
  10. <head>
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  12. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  13. <title>滑动到底部加载下一页内容</title>
  14. <script src="<c:url value="/js/JQuery/jquery-1.10.0.min.js"/>"></script>
  15. <script src="<c:url value="/js/scroll/zepto.min.js"/>"></script>
  16. <style>
  17. table {
  18. width:100%;
  19. padding:0 15px;
  20. background:#fff;
  21. border-collapse: collapse;
  22. }
  23. table td {
  24. padding: 6px 0;
  25. width:33%;
  26. border-bottom:1px solid #e1e1e1;
  27. }
  28. tr td:nth-child(2) {
  29. text-align: center;
  30. }
  31. tr td img {
  32. width: 24px;
  33. vertical-align: middle;
  34. }
  35. tr td:last-child {
  36. text-align: right;
  37. }
  38. td>div:first-child {
  39. /*margin-bottom: -6px;*/
  40. }
  41. td>div:last-child {
  42. color: #9C9C9C;
  43. }
  44. </style>
  45. </head>
  46. <body >
  47. <input type="hidden" name="pageNo" id="pageNo" value="1" />
  48. <div class="white" >
  49. <table id="wrapper">
  50. </table>
  51. </div>
  52. </body>
  53. <script>
  54. $(function(){
  55. query('01');//第一次加载
  56. });
  57. function query(type)
  58. {
  59. alert(type);
  60. $.ajax({
  61. url : "<%=path%>/query",
  62. data : {
  63. pageNo : $("#pageNo").val()
  64. },
  65. cache : false,
  66. success : function(data) {
  67. loading=true;
  68. if(data==null)
  69. {
  70. $("#pageNo").val(parseInt($("#pageNo").val())-1);
  71. }else
  72. {
  73. var content="";
  74. if(type=="00")
  75. {
  76. if(data.length==0)
  77. {
  78. $("#pageNo").val(parseInt($("#pageNo").val())-1);
  79. return "";
  80. }
  81. for(var i=0;i<data.length;i++)
  82. {
  83. content=content
  84. +
  85. '<tr>'
  86. +
  87. '<td><div>'+data[i].id+'</div><div>'+data[i].time+'</div></td>'
  88. +
  89. '<td>¥'+data[i].amount+'</td>'
  90. +
  91. '</tr>';
  92. }
  93. $("#wrapper").append(content);
  94. }else{
  95. for(var i=0;i<data.length;i++)
  96. {
  97. content=content
  98. +
  99. '<tr>'
  100. +
  101. '<td><div>'+data[i].id+'</div><div>'+data[i].time+'</div></td>'
  102. +
  103. '<td>¥'+data[i].amount+'</td>'
  104. +
  105. '</tr>';
  106. }
  107. $("#wrapper").html(content);
  108. }
  109. }
  110. },
  111. error : function(){
  112. loading=true;
  113. $("#pageNo").val(parseInt($("#pageNo").val())-1);
  114. _alert("查询数据出错啦,请刷新再试");
  115. }
  116. });
  117. }
  118. var loading=false;
  119. Zepto(function($){
  120. $(window).scroll(function(){
  121. if(($(window).scrollTop()+$(window).height()>$(document).height()-10)&&loading){
  122. loading=false;
  123. $("#pageNo").val(parseInt($("#pageNo").val())+1);
  124. query("00");
  125. }
  126. });
  127. })
  128. var ua = navigator.userAgent.toLowerCase();
  129. if (/android/.test(ua)) {
  130. $('.date>div>img:last').css({"margin-left":"-25px"});
  131. }
  132. </script>
  133. </html>

2).后端代码

后端代码分为进入页面的初始化方法index和异步查询数据的方法query,具体代码如下:

web控制器代码:

  1. package com.test.web.controller;
  2. import java.util.ArrayList;
  3. import java.util.List;
  4. import org.springframework.stereotype.Controller;
  5. import org.springframework.ui.Model;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.ResponseBody;
  8. import com.test.web.dto.DataDto;
  9. /**
  10. * 测试控制器
  11. *
  12. * @author smile2014
  13. *
  14. */
  15. @Controller
  16. public class TestController {
  17. /**
  18. *
  19. * @return
  20. */
  21. @RequestMapping("/")
  22. public String index() {
  23. return "test";
  24. }
  25. /**
  26. * 查询订单列表
  27. *
  28. * @param model
  29. * @param openId
  30. * 用户授权Id
  31. * @return
  32. * @throws Exception
  33. */
  34. @RequestMapping(value = { "/query" })
  35. @ResponseBody
  36. public Object query(Model model, Integer pageNo) throws Exception {
  37. System.out.println("pageNo="+pageNo);
  38. if (pageNo == null) {
  39. pageNo = 1;
  40. }
  41. List<DataDto> datas = new ArrayList<DataDto>();
  42. for (int i = pageNo * 15; i < (pageNo + 1) * 15; i++) {
  43. DataDto data = new DataDto("10000" + i, "10:" + i, "17." + i);
  44. datas.add(data);
  45. }
  46. System.out.println("datas="+datas);
  47. return datas;
  48. }
  49. }

数据dto代码:

  1. package com.test.web.dto;
  2. /**
  3. * 数据dto
  4. *
  5. * @author smile2014
  6. *
  7. */
  8. public class DataDto {
  9. private String id;
  10. private String time;
  11. private String amount;
  12. public String getId() {
  13. return id;
  14. }
  15. public void setId(String id) {
  16. this.id = id;
  17. }
  18. public String getTime() {
  19. return time;
  20. }
  21. public void setTime(String time) {
  22. this.time = time;
  23. }
  24. public DataDto(String id, String time, String amount) {
  25. super();
  26. this.id = id;
  27. this.time = time;
  28. this.amount = amount;
  29. }
  30. public String getAmount() {
  31. return amount;
  32. }
  33. public void setAmount(String amount) {
  34. this.amount = amount;
  35. }
  36. }

页面效果

刚进入页面时内容:

1041.png


第一次滑动到底部上滑加载的内容:

1042.png


第二次滑动到底部上滑加载的内容:

1043.png

以上就是 spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!

人气教程排行