Comment charger plus de pages avec js lorsque la barre de défilement est abaissée (code ci-joint)

Le contenu de cet article explique comment charger plus de pages avec js lorsque la barre de défilement est abaissée (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. vous. aider.

Sur les téléphones mobiles, la pagination de la liste de données se chargera davantage lorsqu'elle sera descendue vers le bas. Cependant, en mars de l'année dernière, nous avons rencontré une demande d'un client voulant que la page Web soit également déroulante. pour charger plus, donc selon la page Web, plus de contenu est chargé lorsque la barre de défilement est abaissée (expérience de projet personnelle) Le code dans l'article implémente ce chargement déroulant. suit :

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(&#39;没有更多了&#39;);
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分页列表的接口
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}

Cependant, aujourd'hui, le testeur a découvert que lorsque le navigateur est zoomé ou que les paramètres d'affichage de l'écran sont zoomés, le chargement déroulant ne peut pas être effectué. Après plus d'un an, c'est vraiment incroyable@_@

Après le débogage, j'ai constaté que la valeur de positionValue ne peut pas être égale à 0 lors du zoom, et je ne peux pas continuer à charger davantage. j'ai vu un article L'article Chargement déroulant de plus de DEMO (implémentation js) mentionnait :

Si vous attendez que la barre de défilement soit tirée vers le bas avant de charger, cela affectera l'expérience utilisateur. Car généralement lors d'un chargement dynamique, il faut demander des ressources au serveur, ce qui prend du temps. Une meilleure façon consiste à charger dynamiquement davantage et à demander des ressources au serveur lorsque la barre de défilement se trouve à une certaine distance (C) du bas. C'est-à-dire le préchargement et la prélecture. La formule est la suivante
this.scrollHeight - C == $(this).scrollTop() + $(this).height()

J'ai été inspiré après avoir lu ceci, j'ai donc défini la valeur de positionValue sur supérieur ou égal à -10 , le 10 est ici la valeur d'une certaine distance (C) entre la barre de défilement et le bas.
Effectivement, il n'y a aucun problème. Le chargement déroulant peut également être effectué normalement lors du zoom.

Alors, enregistrez-le, partagez-le avec tout le monde et encouragez-vous les uns les autres.

Un autre rappel, $(window).scroll(function() écoute les événements de défilement et ne s'exécute pas. La réponse adoptée dans cette question mentionnait :

Si le style de hauteur du HTML et du corps est défini sur 100 %, < La méthode 🎜> ne détectera pas la hauteur de déploiement correcte (0), ce qui entraînera l'échec de l'événement d'écoute de défilement. Cela peut être résolu en définissant le $(window).scroll code html,body{ height:auto }

Recommandations associées :

var totalPages;//总页数
var pageno = 0;//当前页数
var C = 10;//滚动条距离底部的距离
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue >= -C) {
           //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) {
                
        });
}

jQuery fait défiler vers le bas pour charger instantanément le contenu afin d'obtenir l'effet de flux en cascade, jquery fait défiler vers le bas

js implémente la barre de défilement pour faites défiler vers le bas de la page pour continuer à charger_ les compétences javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!