jq上滑加載更多


html 結構

  <div id="main">
            <ul class="order-list" id="list_box">
                // li
            </ul>
      
         <div id="getmore">
正在加載。。。
         </div>
</div>

script部分

 var page = 1, //分頁碼
            off_on = false, //分頁開關
            timers = null; //定時器
        var p = 0, t = 0;
        //加載數據
        var LoadingDataFn = function () {
            $("#getmore").show()
            var dom = '';
            for (var i = 0; i < 20; i++) {
                dom += '<li>'+i+'</li>';
            }
            $("#getmore").hide()

            $('#list_box').append(dom);
            off_on = true; 
        };

        //初始化, 第一次加載
        $(document).ready(function () {
            LoadingDataFn();
        });

        $(window).scroll(function () {
            //當時滾動條離底部60px時開始加載下一頁的內容
            p = $(this).scrollTop();

            if (t <= p) {//下滾  
                //
                if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
                    clearTimeout(timers);
                    timers = setTimeout(function () {
                        page++;
                        console.log("第" + page + "頁");
                        LoadingDataFn()
                    }, 300);
                }
            } else {//上滾  
                // 
            }
            setTimeout(function () { t = p; }, 0);
        });

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM