So laden Sie mehr Seiten mit js, wenn die Bildlaufleiste nach unten gezogen wird (Code angehängt)

Der Inhalt dieses Artikels befasst sich mit dem Laden weiterer Seiten mit der Bildlaufleiste (mit Code). Ich hoffe, dass er hilfreich ist du hilfst.

Auf Mobiltelefonen wird die Seite der Datenliste stärker geladen, wenn sie nach unten gezogen wird. Im März letzten Jahres stießen wir jedoch auf eine Kundenanfrage, die besagte, dass die Webseite ebenfalls nach unten gezogen werden sollte Um mehr zu laden, wird laut Webseite mehr Inhalt geladen, wenn die Bildlaufleiste nach unten gezogen wird. Der Code im Artikel implementiert dieses Dropdown-Laden folgt:

var totalPages;//总页数
var pageno = 0;//当前页数
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue == 0) {
           //do something
           if (pageno < totalPages - 1) {
               pageno++;
               doSomething(pageno);
           } else {
               alert('没有更多了');
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分页列表的接口
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}

Heute stellten die Tester jedoch fest, dass beim Zoomen des Browsers oder beim Zoomen der Bildschirmanzeigeeinstellung das Laden nicht heruntergezogen werden kann. Nach mehr als einem Jahr ist es wirklich erstaunlich@_@

Nach dem Debuggen habe ich festgestellt, dass der Wert von positionValue beim Zoomen nicht gleich 0 sein kann und ich nicht mehr laden kann Ich habe einen Artikel gesehen. Der Artikel „Dropdown-Laden von mehr DEMO (js-Implementierung)“ erwähnt:

Wenn Sie vor dem Laden warten, bis die Bildlaufleiste nach unten gezogen wird, wirkt sich dies auf die Benutzererfahrung aus. Denn im Allgemeinen müssen Sie beim dynamischen Laden Ressourcen vom Server anfordern, was Zeit kostet. Eine bessere Möglichkeit besteht darin, dynamisch mehr zu laden und Ressourcen vom Server anzufordern, wenn sich die Bildlaufleiste in einem bestimmten Abstand (C) vom unteren Rand befindet. Das heißt, Vorladen und Vorlesen. Die Formel lautet wie folgt:
this.scrollHeight - C == $(this).scrollTop() + $(this).height()

Nachdem ich das gelesen hatte, war ich inspiriert und habe den Wert von positionValue auf gesetzt größer oder gleich -10, 10 ist hier der Wert eines bestimmten Abstands (C) zwischen der Bildlaufleiste und dem unteren Rand.
Natürlich ist das Pull-Down-Laden auch beim Zoomen normal möglich.

Also, nehmen Sie es auf, teilen Sie es mit allen und ermutigen Sie sich gegenseitig.

Noch eine Erinnerung: $(window).scroll(function() wartet auf Scroll-Ereignisse und führt sie nicht aus. Die übernommene Antwort in dieser Frage lautete:

Wenn der Höhenstil von HTML und Body auf eingestellt ist 100 %, -Methode erkennt nicht die richtige Rollout-Höhe (0), was dazu führt, dass das Scroll-Listening-Ereignis fehlschlägt. Die Einstellung $(window).scroll kann das Problem lösen: html,body{ height:auto }

<.>jQuery scrollt nach unten, um den Inhalt sofort zu laden, um den Wasserfall-Flow-Effekt zu erzielen, jQuery scrollt nach unten

js, um die Bildlaufleiste zu implementieren Scrollen Sie zum Ende der Seite, um mit dem Laden fortzufahren_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonSo laden Sie mehr Seiten mit js, wenn die Bildlaufleiste nach unten gezogen wird (Code angehängt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!