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代码我已经上传到我的代码空间，有需要的朋友可以从这里下载：
总结
以上是生活随笔为你收集整理的html5移动端底部效果,spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果...的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： android 两端对齐,LinearL
- 下一篇： html lt;ligt; 属性,HTM