Cet article explique principalement avec vous comment implémenter js pull-up sur les pages Web mobiles pour obtenir plus d'informations. Il est principalement partagé avec vous sous forme de code. J'espère qu'il pourra aider tout le monde.
<%@ 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>
Recommandations associées :
Explication détaillée du composant d'actualisation déroulant de charge pull-up mescroll.js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!