基于JavaScript實(shí)現(xiàn)移動(dòng)端無(wú)限加載分頁(yè)

發(fā)布時(shí)間：2020-08-25 08:35:39 來(lái)源：腳本之家閱讀：191 作者：Marven 欄目：web開(kāi)發(fā)

本文實(shí)例為大家分享了js實(shí)現(xiàn)移動(dòng)端無(wú)限加載分頁(yè)的具體代碼，供大家參考，具體內(nèi)容如下

原理：當(dāng)滾動(dòng)條到達(dá)底部時(shí)，執(zhí)行下一頁(yè)內(nèi)容。

判斷條件需要理解三個(gè)概念：
    1.scrollHeight 真實(shí)內(nèi)容的高度
    2.clientHeight 視窗的高度，即在瀏覽器中所能看到的內(nèi)容的高度
    3.scrollTop 視窗上面隱藏掉的部分，即滾動(dòng)條滾動(dòng)的距離

思路：

    1.使用fixed定位加載框
    2.使用$(window).scroll();方法來(lái)觸發(fā)是否加載
    3.通過(guò) 真實(shí)內(nèi)容高度 - 視窗高度 - 上面隱藏部分 < 10 ,作為加載觸發(fā)的條件

代碼樣例

var page=1; //當(dāng)前頁(yè)的頁(yè)碼
      var flagNoData = false; //false
    var allpage; //總頁(yè)碼，會(huì)從后臺(tái)獲取
    function showAjax(page){
      $.ajax({
        url:"",
        type:"",
        data:"",
        success:function(data){
          //要執(zhí)行的內(nèi)容
          showContent();
            if(page>=data.allpage){ //當(dāng)前頁(yè)碼大于等于總頁(yè)碼
            flagNoData = true;
            };
          page+=1;  //頁(yè)數(shù)加1
        }
      })
    }
    function scrollFn(){
      //真實(shí)內(nèi)容的高度
      var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
      //視窗的高度
      var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
      //隱藏的高度
      var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if(falgNoData){ //數(shù)據(jù)全部加載完了
         return;
        }else if(pageHeight - viewportHeight - scrollHeight < 10){  //如果滿足觸發(fā)條件，執(zhí)行
        showAjax(page);
      }
    }
    $(window).bind("scroll",scrollFn);  //綁定滾動(dòng)事件

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

基于JavaScript實(shí)現(xiàn)移動(dòng)端無(wú)限加載分頁(yè)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽