recherche

Maison >interface Web >js tutoriel >Comment charger automatiquement plus de contenu lorsque la barre de défilement glisse vers le bas

Comment charger automatiquement plus de contenu lorsque la barre de défilement glisse vers le bas

php中世界最好的语言
php中世界最好的语言original
2018-03-14 17:06:573656parcourir

Cette fois, je vais vous expliquer comment charger automatiquement plus de contenu lorsque la barre de défilement glisse vers le bas. Précautions Quelles sont-elles ? Voici des cas réels. .

L'exemple de cet article décrit comment jQuery peut automatiquement charger davantage lors du défilement vers le bas. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

AJAX est utilisé ici pour réaliser la fonction de chargement des données en faisant défiler jusqu'à la fin : 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="js/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      AddSth();
    });
    $(function () {
      $(".main").unbind("scroll").bind("scroll", function (e) {
        var sum = this.scrollHeight;
        if (sum <= $(this).scrollTop() + $(this).height()) {
          AddSth();
        }
      });
    });
    function AddSth() {
      $.ajax({
        type: &#39;POST&#39;,
        url: "index.aspx/ReturnSth",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        //data: "",
        success: function (data) {
          json = $.parseJSON(data.d);
          for (var i in json) {
            var tbBody = "<ul><li>" + json[i].sth + "</li></ul>";
            $(".main").append(tbBody);
          }
          $(".main").append("<hr />");
        }
      });
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <p>下拉加载更多</p><br />
    <p class="main" style="border: 1px solid red; height: 700px; overflow: auto;"></p>
  </form>
</body>
</html>

Je crois que vous avez J'ai maîtrisé la méthode après avoir lu le cas dans cet article, et il y aura des choses plus excitantes. Veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser jquery pour créer un effet de loupe

jquery ajoute des balises HTML stylisées

Comment jquery lie les événements aux balises générées dynamiquement

Comment jQuery obtient la valeur des sous-éléments de balise

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!

Déclaration：
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
Article précédent：Délégation d'événement en jsArticle suivant：Délégation d'événement en js

Articles Liés

Voir plus