zoukankan      html  css  js  c++  java
  • h5 实现页面上拉加载更多数据

    您好,您的上拉加载更多的代码来喽:

    html:(style部分;html部分;js部分--js部分主要就是监控上拉,调接口)

    //上拉加载更多css
        <style>
            .wait-loading {
                margin: 0 auto;
                width: 3rem;
                height: 3rem;
                vertical-align: middle;
                -webkit-animation: waitLoading 1s steps(12, end) infinite;
                animation: waitLoading 1s steps(12, end) infinite;
                background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
                background-size: 100%;
            }
    
            @keyframes waitLoading {
                0% {
                    -webkit-transform: rotate3d(0, 0, 1, 0deg);
                    transform: rotate3d(0, 0, 1, 0deg);
                }
    
                100% {
                    -webkit-transform: rotate3d(0, 0, 1, 360deg);
                    transform: rotate3d(0, 0, 1, 360deg);
                }
            }
    
            .loading {
                width: 4rem;
                height: 4.4rem;
                background-color: rgb(89, 89, 89);
                z-index: 99999999;
                position: fixed;
                top: 50%;
                left: 39%;
                border-radius: 5px;
            }
    
            .loading-txt {
                color: #fff;
                width: 100%;
                text-align: center;
                font-size: 14px;
            }
            .ending {
                width: 6rem;
                height: 2.4rem;
                background-color: rgb(89, 89, 89);
                z-index: 99999999;
                position: fixed;
                top: 50%;
                left: 34%;
                border-radius: 5px;
                line-height: 2.4rem;
            }
    
        </style>
    
    <!-- loading -->
    <div class="loading" style="display:none">
      <div class="wait-loading"></div>
      <div class="loading-txt">内容加载中</div>
    </div>
    <!-- ending 加载完毕 -->
    <div class="ending" style="display:none">
      <div class="loading-txt">没有更多数据了~</div>
    </div>
    
    
    <script>
    //page start
        var page = 0,
            timers = null;
        //加载数据
        var LoadingDataFn = function() {
            showloading();
            var date = $("#dateInfo").val();
            if(date == '' || date == null)
            {
                date = 0;
            }
            $.ajax({
                type: "GET",
                url: "{:url('index/indexdata')}",
                data: {
                    'page':page,
                    'date':date
                },
                dataType: "json",
                success: function (data) {
                    if (data.success) {
                        hideloading();
                        var ghtml = "";
                        for (var i=0;i<data.msg.length;i++) {
                            ghtml += "<li><table><tr>";
                            ghtml += "<td width='14%'>" + data.msg[i].id + '' + "</td>";
                            ghtml += "<td width='14%'>" + data.msg[i].start_time + "</td>";
                            ghtml += "<td class='nums'>";
                            for(var j=0;j<data.msg[i].random.length;j++){
                                ghtml += "<i class='no" + data.msg[i].random[j] + "'>" + data.msg[i].random[j] + "</i>";
                            }
                            ghtml += "</td>";
                            ghtml += "</tr></table></li>";
                        }
                        $(".numList").append(ghtml);
                        $("#dateInfo").val(data.date);
                    } else {
                        showhiding();
                    }
                }
            });
        };
        //初始化, 第一次加载
        $(document).ready(function() {
            LoadingDataFn();
            resetTime();
        });
        $(window).scroll(function() {
            if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
                clearTimeout(timers);
                timers = setTimeout(function() {
                    page++;
                    console.log("" + page + "");
                    LoadingDataFn();
                }, 300);
            }
        });
        function showloading() {
            $(".loading").show()
        }
        function hideloading() {
            $(".loading").hide()
        }
        function showhiding(){
            $(".ending").show().delay(1500).hide(0);
        }
        //page end
    </script>

    php:

    在控制器中加入  接收 分页页数的代码 && 加入 limit语句

    let the world have no hard-to-write code ^-^
  • 相关阅读:
    stl_heap
    关于随机数 C++
    关于if语句的细节
    C++关于智能指针
    sqlyog
    win10 64位 汇编环境
    Qt 乱码
    Vux使用经验
    Flex布局新旧混合写法详解
    【原】npm 常用命令详解
  • 原文地址:https://www.cnblogs.com/ovim/p/11153941.html
Copyright © 2011-2022 走看看