suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie jQuery, um beim Scrollen nach unten automatisch zu laden

Verwenden Sie jQuery, um beim Scrollen nach unten automatisch zu laden

亚连
亚连Original
2018-06-05 17:10:151576Durchsuche

In diesem Artikel wird hauptsächlich die Methode von jQuery zum automatischen Laden von mehr beim Scrollen nach unten vorgestellt, wobei die Implementierungsfähigkeiten von jQuery zum dynamischen Betrieb von Seitenelementen basierend auf Ajax berücksichtigt werden.

Dieser Artikel beschreibt die Beispiele jQuery implementiert eine Methode, um beim Scrollen nach unten automatisch mehr zu laden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier verwenden wir AJAX, um die Funktion des Scrollens bis zum Ende zum Laden von Daten 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>

Das Obige ist das, was ich zusammengestellt habe für alle. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Über das Problem des Extrahierens projektbezogener Konfigurationsdateien beim Packen von vue-cli (ausführliches Tutorial)

Erstellen von Sliding-Stack-Komponenten mit Vue (ausführliches Tutorial)

Informationen zur Verwendung von Fetch zum Hochladen von Bildern in React Native (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um beim Scrollen nach unten automatisch zu laden. 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：So implementieren Sie dieselbe Interviewfragenkomponente mit Angular, React und VueNächster Artikel：So implementieren Sie dieselbe Interviewfragenkomponente mit Angular, React und Vue

In Verbindung stehende Artikel

Mehr sehen