Home > Article > Web Front-end > spring mvc +HTML5 realizes the bottom sliding up of the mobile terminal to asynchronously load more content and pagination effect

spring mvc +HTML5 realizes the bottom sliding up of the mobile terminal to asynchronously load more content and pagination effect

黄舟Original: 2017-02-09 15:46:223596browse

Due to the portability of mobile phones, their increasing intelligence and faster mobile network speeds, mobile phones have become a pervasive part of people’s lives. With the popularity of mobile phones,

mobile applications have quickly become popular, such as micro-malls, mobile web pages, mobile APPs, etc. Since mobile applications are so popular, today we will talk about how to dynamically load data in mobile web pages. So how do we implement it? Is it like a PC web page, with a previous page and a next page or other ways.

In fact, the previous page and next page like PC web pages are definitely not possible. The mobile phone screen is very small, difficult to click and the user experience is very poor. Today I will introduce to you how to use

spring mvc +HTML5 implements the paging effect of sliding up the bottom of the mobile terminal to asynchronously load more content.

Working principle

When the page slides to the bottom, and the user slides up, zepto listens to the event and executes the method of loading more content. In this method, jQuery's

$.ajax is used to initiate an asynchronous request to the web server. After the web server receives the asynchronous request, it queries and processes the data, and then returns the result. # on the page side

##$.ajax receives the returned data, analyzes and processes the data and appends it to the previous page data. This is how the whole thing works.

Code implementation

1). Front-end code:

The front-end code requires jquery and zepto. You can download it online. The following is the code of the page:

<%@ 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(&#39;01&#39;);//第一次加载
});
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
					  		+	&#39;<tr>&#39;
					  		+	&#39;<td><div>&#39;+data[i].id+&#39;</div><div>&#39;+data[i].time+&#39;</div></td>&#39;
					 		+	&#39;<td>¥&#39;+data[i].amount+&#39;</td>&#39;
					  		+	&#39;</tr>&#39;;
					}
			 		$("#wrapper").append(content);
				}else{
					
					for(var i=0;i<data.length;i++)
					{
						
						  content=content
						  		+	&#39;<tr>&#39;
						  		+	&#39;<td><div>&#39;+data[i].id+&#39;</div><div>&#39;+data[i].time+&#39;</div></td>&#39;
						 		+	&#39;<td>¥&#39;+data[i].amount+&#39;</td>&#39;
						  		+	&#39;</tr>&#39;;
					}
			 		$("#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)) {
		$(&#39;.date>div>img:last&#39;).css({"margin-left":"-25px"});
	 }
</script>
</html>

2). Back-end code

The back-end code is divided into the initialization method index to enter the page and the asynchronous data query method query. The specific code is as follows:

web controller code:

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;
	}

}

Data dto code:

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;
	}
}

Page effect

Content when you first enter the page:

spring mvc +HTML5 realizes the bottom sliding up of the mobile terminal to asynchronously load more content and pagination effect

First slide to the bottom and slide up to load the content:

spring mvc +HTML5 realizes the bottom sliding up of the mobile terminal to asynchronously load more content and pagination effect

Slide to the bottom for the second time and slide up to load the content:

The above is the content of spring mvc + HTML5 to achieve the bottom sliding asynchronous loading of more content paging effects on the mobile terminal. For more related content, please pay attention to the PHP Chinese website (www.php.cn)! spring mvc +HTML5 realizes the bottom sliding up of the mobile terminal to asynchronously load more content and pagination effect

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Android Alipay client HTML5 web page occasionally cannot be closed automaticallyNext article：Android Alipay client HTML5 web page occasionally cannot be closed automatically

See more

spring mvc +HTML5 realizes the bottom sliding up of the mobile terminal to asynchronously load more content and pagination effect

Related articles