search

Home  >  Article  >  Backend Development  >  Implement js pull-up on mobile web pages to obtain more

Implement js pull-up on mobile web pages to obtain more

小云云
小云云Original
2018-03-21 15:26:281291browse

This article mainly shares with you how to implement js pull-up on mobile web pages to get more information. It is mainly shared with you in the form of code. I hope it can help everyone. 

<%@ 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 +&#39;-&#39;+ getzf(oMonth) +&#39;-&#39;+ getzf(oDay);//最后拼接时间  
            return oTime;  
        };  
        //补0操作  
        function getzf(num){  
            if(parseInt(num) < 10){  
                num = &#39;0&#39;+num;  
            }  
            return num;  
        }  
</script>

</html>

Related recommendations:

mescroll.js pull-up load pull-down refresh component detailed explanation

The above is the detailed content of Implement js pull-up on mobile web pages to obtain more. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：PHP variable reference and non-reference performance comparisonNext article：PHP variable reference and non-reference performance comparison

Related articles

See more