实现手机web页面js上拉获取更多-php教程-PHP中文网

实现手机web页面js上拉获取更多

小云云

发布： 2018-03-21 15:26:28

原创

1578人浏览过

本文主要和大家分享实现手机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>

登录后复制