So laden Sie automatisch mehr Inhalte, wenn die Bildlaufleiste nach unten gleitet-js-Tutorial-php.cn

So laden Sie automatisch mehr Inhalte, wenn die Bildlaufleiste nach unten gleitet

php中世界最好的语言

Freigeben： 2018-03-14 17:06:57

Original

3571 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen, wie Sie automatisch mehr Inhalte laden Vorsichtsmaßnahmen Was sind das? .

Das Beispiel in diesem Artikel beschreibt, wie jQuery beim Scrollen nach unten automatisch mehr laden kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

AJAX wird hier verwendet, um die Funktion des Ladens von Daten durch Scrollen bis zum Ende zu realisieren:

<!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>

Nach dem Login kopieren

Ich glaube, das haben Sie Ich habe die Methode gemeistert, nachdem ich den Fall in diesem Artikel gelesen habe, und es wird weitere spannende Dinge geben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie JQuery, um einen Lupeneffekt zu erstellen

JQuery fügt gestaltete HTML-Tags hinzu

Wie jQuery Ereignisse an dynamisch generierte Tags bindet

Wie jQuery den Wert von Tag-Unterelementen erhält

Das obige ist der detaillierte Inhalt vonSo laden Sie automatisch mehr Inhalte, wenn die Bildlaufleiste nach unten gleitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!