Heim > Artikel > Web-Frontend > So laden Sie automatisch mehr Inhalte, wenn die Bildlaufleiste nach unten gleitet

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

php中世界最好的语言Original: 2018-03-14 17:06:573573Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ereignisdelegation in jsNächster Artikel：Ereignisdelegation in js

In Verbindung stehende Artikel

Mehr sehen