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

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>

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!