免插件，簡單實現上拉加載loading

本文轉載自查看原文 2017-02-21 15:28 2161

上拉加載是前端經常遇到的問題，采用插件往往能夠輕松解決，這里介紹一種免插件簡單實現上拉加載的方法，參考一下，下面分享一下代碼。

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更適用於移動端頁面使用，希望能幫助大家。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue簡單實現滾動加載（上拉加載） Axios插件和loading的實現 jQuery簡單的上拉加載 vue 實現loading插件簡單的下拉加載和上拉加載 JS+CSS實現的下拉刷新/上拉加載插件 mui簡單的上拉加載更多下拉刷新數據的簡單實現移動端下拉上拉 uniapp上拉加載更多功能的簡單實現 MUI 實現下拉刷新上拉加載的簡單例子 mui實現分頁上拉加載更多下拉刷新數據的簡單實現移動端下拉上拉