首頁 > 後端開發 > php教程 > 實作手機web頁面js上拉獲取更多

實作手機web頁面js上拉獲取更多

小云云
發布: 2023-03-21 21:22:02
原創
1360 人瀏覽過

本文主要跟大家分享實作手機web頁面js上拉獲取更多,主要以程式碼的形式和大家分享,希望能幫助大家。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

<%@ 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>

登入後複製

相關推薦:

mescroll.js上拉載入下拉刷新元件詳解

#

以上是實作手機web頁面js上拉獲取更多的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
怎麼實作 JavaScript點與圓的位置關係
來自於 1970-01-01 08:00:00
0
0
0
JavaScript鉤子函數是什麼?
來自於 1970-01-01 08:00:00
0
0
0
c++ 呼叫javascript
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板