本文主要和大家分享实现手机web页面js上拉获取更多，主要以代码的形式和大家分享，希望能帮助到大家。
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!doctype html>
<html>
<head>
</head>
<body>
</p>
<p class="bs-example" data-example-id="hoverable-table">
<table class="table table-striped" id="tables">
<thead>
<tr>
<th>#</th>
<th>帐号</th>
<th>金额</th>
<th>创建时间</th>
<th>手续费</th>
</tr>
</thead>
<tbody>
<c:foreach var="user" items="${data}" varstatus="status">
<tr>
<th>${status.index+1 }</th>
<td id="phone">${user.phone }</td>
<td><fmt:formatnumber type="number" value="${user.amount }" pattern="0" maxfractiondigits="0"/></td>
<c:set var="time" value="${user.createtime}"/>
<td>${fn:substringbefore(time," ")}</td>
<td><fmt:formatnumber type="number" value="${user.commamount }" pattern="0" maxfractiondigits="0"/></td>
</tr>
</c:foreach>
</tbody>
</table>
</p>
</body>
<script type="text/javascript">
//--------------上拉加载更多---------------
//获取滚动条当前的位置
$(function(){
function getscrolltop() {
var scrolltop = 0;
if(document.documentelement && document.documentelement.scrolltop) {
scrolltop = document.documentelement.scrolltop;
} else if(document.body) {
scrolltop = document.body.scrolltop;
}
return scrolltop;
}
//获取当前可视范围的高度
function getclientheight() {
var clientheight = 0;
if(document.body.clientheight && document.documentelement.clientheight) {
clientheight = math.min(document.body.clientheight, document.documentelement.clientheight);
} else {
clientheight = math.max(document.body.clientheight, document.documentelement.clientheight);
}
return clientheight;
}
//获取文档完整的高度
function getscrollheight() {
return math.max(document.body.scrollheight, document.documentelement.scrollheight);
}
// 页数
var page = 0;
var id=11;
//滚动事件触发
window.onscroll = function() {
if(getscrolltop() + getclientheight() == getscrollheight()) {
$.get("${pagecontext.request.contextpath}/app/getinvitelistpage.action?userid=14&page="+page+"&rows=5",{},function(result){
$("table").append("<tr><td><b>"+id+"</b></td><td>"+result.data[0].phone+"</td><td>"+result.data[0].amount+"</td><td>"+getmoth(result.data[0].createtime)+"</td><td>"+result.data[0].commamount+"</td></tr>"+
"<tr><td><b>"+(id+1)+"</b></td><td>"+result.data[1].phone+"</td><td>"+result.data[1].amount+"</td><td>"+getmoth(result.data[1].createtime)+"</td><td>"+result.data[1].commamount+"</td></tr>"+
"<tr><td><b>"+(id+2)+"</b></td><td>"+result.data[2].phone+"</td><td>"+result.data[2].amount+"</td><td>"+getmoth(result.data[2].createtime)+"</td><td>"+result.data[2].commamount+"</td></tr>"+
"<tr><td><b>"+(id+3)+"</b></td><td>"+result.data[3].phone+"</td><td>"+result.data[3].amount+"</td><td>"+getmoth(result.data[3].createtime)+"</td><td>"+result.data[3].commamount+"</td></tr>"+
"<tr><td><b>"+(id+4)+"</b></td><td>"+result.data[4].phone+"</td><td>"+result.data[4].amount+"</td><td>"+getmoth(result.data[4].createtime)+"</td><td>"+result.data[4].commamount+"</td></tr>");
page++;
id=id+5;
})
}
}
})
//-----------------结束--------------------
function getmoth(str){
var odate = new date(str),
oyear = odate.getfullyear(),
omonth = odate.getmonth()+1,
oday = odate.getdate(),
otime =oyear +'-'+ getzf(omonth) +'-'+ getzf(oday);//最后拼接时间
return otime;
};
//补0操作
function getzf(num){
if(parseint(num) < 10){
num = '0'+num;
}
return num;
}
</script>
</html>
相关推荐：
mescroll.js上拉加载下拉刷新组件详解
以上就是实现手机web页面js上拉获取更多的详细内容。