免插件，简单实现上拉加载loading

上拉加载是前端经常遇到的问题，采用插件往往能够轻松解决，这里介绍一种免插件简单实现上拉加载的方法，参考一下，下面分享一下代码。

 

html

    <body> 
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class='ball-pulse'>加载更多</div>
    </body>

加入了css3动画loading效果；

css

        <style type="text/css">
            
            /*loading效果*/
            @-webkit-keyframes scale {
                0% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
                45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; }
                80% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
            }
            @keyframes scale {
                0% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
                45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; }
                80% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
            }
            
            .ball-pulse > div:nth-child(1) {
                -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
                animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); }
            .ball-pulse > div:nth-child(2) {
                -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
                animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); }
            .ball-pulse > div:nth-child(3) {
                -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
                animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); }
            .ball-pulse > div {
                background-color: #aaa;
                width: 7px;
                height: 7px;
                border-radius: 100%;
                margin: 2px;
                display: inline-block; }
            .ball-pulse{text-align: center;color:#aaa;background:#EDF4F4; font-size:16px;height:1.5rem;line-height: 1rem;}
            
            body,html,ul,li{padding:0;margin:0;}
            ul li{height:4.5rem;background:#ccc;border-bottom:2px solid #aaa;
                list-style: none;}
        </style>

 

js部分：

 1     <script type="text/javascript" src="jquery-2.1.0.js"></script>
 2     <script type="text/javascript">
 3         $(function() {
 4             /****************** 滚动上拉下拉加载 ***************/
 5             $(document).on("scroll", function() {
 6                 var scrollTop = $(this).scrollTop();
 7                 var scrollHeight = $(document).height();
 8                 var windowHeight = $(window).height();
 9                 if($(".ul li").length == 10) {
10                     $(".ball-pulse").html("已经到底了！")
11                 } else {
12                     if(scrollTop + windowHeight == scrollHeight) {
13                         //console.log("我到底部了");
14                         setTimeout(getmore, 600)
15         
16                         function getmore() {
17                             $(".ball-pulse").html("<div></div><div></div><div></div>")
18                             setTimeout(function() {
19                                 $(".ball-pulse").html("加载更多")
20                                 $("ul").append("<li></li><li></li><li></li>")　　　　　　　　　　　　　　　　
21                             }, 1000)　　　　　　　　　　　　　　
22                         }　　　　　　　　　　　　
23                     }　　　　　　　　　　
24                 }　　　　　　
25             });　　　　
26         })　　
27     </script>

 

 

当然我们也可以在加载的时候做下js判断，如果数据加载完毕，loading显示“已经到底了！”，这就看我们自己的发挥了，这个demo更适用于移动端页面使用，希望能帮助大家。

 

posted @ 2017-02-21 15:28  coober  阅读(2665)  评论(0)  编辑  收藏  举报