JS realisiert unbegrenzte Lade- und Paging-Funktionen auf mobilen Endgeräten

Dieses Mal bringe ich Ihnen JS, um unbegrenztes Laden auf dem mobilen Endgerät zu erreichenPaging-Funktion Welche Vorsichtsmaßnahmen gibt es für JS, um unbegrenztes Laden und Paging-Funktion zu erreichen? Das mobile Endgerät wie folgt Dies ist ein praktischer Fall, schauen wir uns ihn an.

Prinzip: Wenn die Bildlaufleiste den unteren Rand erreicht, führen Sie den Inhalt der nächsten Seite aus.

Beurteilungsbedingungen müssen drei Konzepte verstehen:
1.scrollHeight Die Höhe des tatsächlichen Inhalts
2.clientHeight Die Höhe des Fensters, dh die Höhe des sichtbaren Inhalts im Browser
3.scrollTop Der verborgene Teil des Fensters, also der Scrollabstand der Bildlaufleiste

Idee:

1. Verwendung fest um die Ladebox zu positionieren
2. Verwenden Sie die Methode $ (window).scroll();, um auszulösen, ob geladen werden soll
3. Verwenden Sie die tatsächliche Inhaltshöhe – Fensterhöhe – den verborgenen Teil darüber

varpage=1;//当前页的页码
      varflagNoData =false;//false
    varallpage;//总页码，会从后台获取
    functionshowAjax(page){
      $.ajax({
        url:"",
        type:"",
        data:"",
        success:function(data){
          //要执行的内容
          showContent();
            if(page>=data.allpage){//当前页码大于等于总页码
            flagNoData =true;
            };
          page+=1; //页数加1
        }
      })
    }
    functionscrollFn(){
      //真实内容的高度
      varpageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
      //视窗的高度
      varviewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
      //隐藏的高度
      varscrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if(falgNoData){//数据全部加载完了
         return;
        }elseif(pageHeight - viewportHeight - scrollHeight < 10){ //如果满足触发条件，执行
        showAjax(page);
      }
    }
    $(window).bind("scroll",scrollFn); //绑定滚动事件

Ich glaube, ich habe es gesehen. Sie beherrschen die Methode im Fall dieses Artikels. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte der Angular2-Entwicklungskomponente

JS implementiert einfache vier arithmetische Operationen

Das obige ist der detaillierte Inhalt vonJS realisiert unbegrenzte Lade- und Paging-Funktionen auf mobilen Endgeräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!