html5移动端底部效果,spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果...

代码实现

1).前端代码：

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

contentType="text/html; charset=UTF-8"%>

String path = request.getContextPath();

%>

滑动到底部加载下一页内容

">

">

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;

}

$(function(){

query('01');//第一次加载

});

function query(type)

{

alert(type);

$.ajax({

url : "/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

{

content=content

+'

'

+'

'+data[i].id+'

'+data[i].time+'

'

+'

¥'+data[i].amount+''

+'

';

}

$("#wrapper").append(content);

}else{

for(var i=0;i

{

content=content

+'

'

+'

'+data[i].id+'

'+data[i].time+'

'

+'

¥'+data[i].amount+''

+'

';

}

$("#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"});

}

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 datas = new ArrayList();

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;

}

}

页面效果

刚进入页面时内容：

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

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

注：整个demo代码我已经上传到我的代码空间，有需要的朋友可以从这里下载：