时间:2021-07-01 10:21:17 帮助过:66人阅读
移动应用也快速的火了起来比如微商城、手机网页、移动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;
- }
- }
页面效果
刚进入页面时内容:
第一次滑动到底部上滑加载的内容:
第二次滑动到底部上滑加载的内容:
以上就是 spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!