JS下拉載入資料

標籤：設定   loaddata   總結   blog   dem   log   正是   tab   val   

判斷頁面是否到底了,如果到底了,則載入新資料進來

自總結要點

1.拉到最底時,會請求資料,此時如果滾動未停止,那麼會重複載入資料,此舉浪費伺服器時間
解決辦法是,設定一個變數,在載入之前,將它置為真.那麼在拉到最底時判斷一下這個變數值再載入
在請求資料的方法裡,回調 函數中成功時,再將變數值置為假.如果有分頁值,那麼還要將分頁值加1.本頁的DEMO的分頁參數是放在隱藏欄位中的

判斷依據 以下是網上抄的

首先理解三個dom元素，分別是：clientHeight、offsetHeight、scrollTop。

clientHeight：這個元素的高度，佔用整個空間的高度，所以，如果一個div有捲軸，那個這個高度則是不包括捲軸沒顯示出來的下面部分的內容。而只是單純的DIV的高度。

offsetHeight：是指元素內容的高度。依照上面的，那這個高度呢就是DIV內部的高度，包括可見部分及以捲軸下面的不可見部分。

scrollTop：這個是什麼呢？他可以理解為捲軸可以滾動的長度。

舉例，如果一個DIV高度是400px（即clientHeight為400），而裡面的內容是一個很長的列表，內容的高度是1000px（即offsetHeight為1000）。那麼，可見部分我們看到400px，1000px的內容中還有600px不可見。而這不可見的部分呢，正是我們通過拉動捲軸才能把這一部分顯示出來。你如果捲軸不拉動，此時scrollTop為0，如果你把捲軸拉到底，顯示出列表最下面的部分，此時，scrollTop為600。　所以scrollTop的取值區間為[0, 600]。　所以這個600可以理解為捲軸可以滾動的長度。

理解完上面的這個概念之後。要判斷是否滾動到底部就很好做了。

首先，我們拉動捲軸，從最上面拉到最下面，變化的是scrollTop的值，而這個值是有一個區間的。

這個區間是：[0, (offsetHeight - clientHeight)]

即，捲軸拉動的整個過程的變化在 0 到 (offsetHeight – clientHeight) 範圍之內。

1、判斷捲軸滾動到最底端：scrollTop == (offsetHeight – clientHeight)

2、在捲軸距離底端50px以內：(offsetHeight – clientHeight) – scrollTop <= 50

3、在捲軸距離底端5%以內：scrollTop / (offsetHeight – clientHeight) >= 0.95

如果要實現拉到底部自動載入內容。只要註冊個捲軸事件：

     $("#databox").scroll(function(){           var $this =$(this),           viewH =$(this).height(),//可見高度           contentH =$(this).get(0).scrollHeight,//內容高度           scrollTop =$(this).scrollTop();//滾動高度          //if(contentH - viewH - scrollTop <= 100) { //到達底部100px時,載入新內容          if(scrollTop/(contentH -viewH)>=0.95){ //到達底部100px時,載入新內容                       // 這裡載入資料..                      if (!isloaddata)                        loaddata()                    else                        console.log("載入中,不要重複載入")        }       });  

 var isloaddata = false;        $(function ()        {            $("#databox").scroll(function ()            {                var $this = $(this),                viewH = $(this).height(),//可見高度                  contentH = $(this).get(0).scrollHeight,//內容高度                  scrollTop = $(this).scrollTop();//滾動高度                  console.log(‘可見高度:‘ + viewH + ‘ 內容高度‘ + contentH + ‘ 滾動高度‘ + scrollTop);                console.log(‘還要滾動多少到底:‘ + (scrollTop-(contentH - viewH)));                //if(contentH - viewH - scrollTop <= 100) { //到達底部100px時,載入新內容                  if (scrollTop / (contentH - viewH) >= 0.97) { //到達底部100px時,載入新內容                      // 這裡載入資料..                      if (!isloaddata)                        loaddata()                    else                        console.log("載入中,不要重複載入")                }            });        })        function loaddata()        {            isloaddata = true;            console.log(‘到底了, 正在載入資料了:‘);            para = {};            para.pageindex = $(‘#pageindex‘).val();            para.pagesize = $(‘#pagesize‘).val();            $.post(‘/test/testdate‘, para, function (data)            {                if (data)                {                    var html = ‘‘;                    for(var i in data)                    {                        html += ‘<p style="padding-left:‘+Math.pow(i,2)+‘px;font-size:15px;background-color:#b8b8b9;box-shadow:2px 2px #fff">‘ + data[i] + ‘</p>‘;                    }                }                $("#databox").append(html);                isloaddata = false;                $(‘#pageindex‘).val(parseInt(para.pageindex) + 1);            })        }

 

JS下拉載入資料