代碼實現

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代碼我已經上傳到我的代碼空間，有需要的朋友可以從這里下載：

總結

以上是生活随笔為你收集整理的html5移动端底部效果,spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。