Comment charger automatiquement plus de contenu lorsque la barre de défilement glisse vers le bas-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-03-14 17:06:57

original

3640 Les gens l'ont consulté

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>

Copier après la connexion

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!