Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter le clic de défilement js pour charger plus de code de données ?

藏色散人
Libérer: 2019-05-11 17:54:01
original
3764 Les gens l'ont consulté

Cet article présente principalement js pour implémenter la fonction de faire défiler la barre de défilement vers le bas de la page pour cliquer pour en charger davantage. Par rapport à la plupart des sites Web, isscroll.js est utilisé pour implémenter le pull-. jusqu'à pour charger davantage ou la fonction déroulante pour actualiser. Plus facile à comprendre pour tout le monde. L'idée simple ici est que toutes les données de la page, selon les exigences d'affichage, quelles parties sont affichées, puis le reste est masqué. S'il y a encore des données, cliquez simplement pour en charger davantage et continuez à afficher les données ; jusqu'à ce qu'il n'y ait plus de données affichées, le chargement terminé apparaîtra.

Lors du chargement, vous pouvez le configurer pour afficher "Chargement..." Si plus de données ne sont pas affichées, vous pouvez ajouter un bouton "Cliquez pour charger plus" en bas. Jusqu'à ce qu'il n'y ait plus de données, il sera affiché que tout le chargement est terminé.

js scroll cliquez pour charger plus de données. L'exemple de code spécifique est le suivant :

<div class="loading">
    <div class="hidden"></div>
    <ul class="img-list"><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/1.png" alt="" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/2.png" alt="XC-PH-W02" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/3.png" alt="XC-PH-W06" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/4.png" alt="XC-PH-W07" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li></ul>
    <a href="javascript:;" onclick="loading.loadMore();"><div class="btn-more">点击加载更多</div></a>
</div>
<script src="js/jquery.min.js"></script>
<script>
    var _content = [];//临时存储li循环内容
    var loading = {
        _default : 9,//默认显示图片个数
        _loading : 9,//每次点击按钮后加载的个数
        init : function() {
            var lis = $(".loading .hidden li");
            $(".loading ul.img-list").html("");
            for (var n = 0; n < loading._default; n++) {
                lis.eq(n).appendTo(".loading ul.img-list");
            }
            $(".loading ul.img-list img").each(function() {
                $(this).attr(&#39;src&#39;, $(this).attr(&#39;realSrc&#39;));
            })
            for (var i = loading._default; i < lis.length; i++) {
                _content.push(lis.eq(i));
            }
            $(".loading .hidden").html("");
        },
        loadMore : function() {
            var mLis = $(".loading ul.img-list li").length;
            for (var i = 0; i < loading._loading; i++) {
                var target = _content.shift();
                if (!target) {
                    $(&#39;.loading .btn-more&#39;).html("<p>全部加载完毕</p>");
                    break;
                }
                $(".loading ul.img-list").append(target);
                $(".loading ul.img-list img").eq(mLis + i).each(function() {
                    $(this).attr(&#39;src&#39;, $(this).attr(&#39;realSrc&#39;));
                });
            }
        }
    }
    loading.init();
</script>
Copier après la connexion

J'espère que cet article. présentera l'utilisation de js. L'implémentation de la fonction consistant à cliquer pour charger plus de données sera utile à tout le monde !

[Recommandations d'articles connexes]

Comment Jquery implémente le chargement pull-up et plus encore

Cliquez pour en charger davantage en fonction de ajax Charger cette page sans actualiser

Comment implémenter le chargement par défilement de plus de fonctions dans vue

$.ajax+php tutoriel pratique déroulant Un explication du principe du chargement automatique de plus d'articles à tout moment

Exemple de code pour obtenir l'effet de chargement par pull-up de page




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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal