Utilisez jQuery pour charger automatiquement lors du défilement vers le bas-js tutoriel-php.cn

Utilisez jQuery pour charger automatiquement lors du défilement vers le bas

亚连

Libérer： 2018-06-05 17:10:15

original

1572 Les gens l'ont consulté

Cet article présente principalement la méthode de jQuery pour charger automatiquement davantage lors du défilement vers le bas, impliquant les compétences de jQuery en matière d'implémentation d'éléments de page fonctionnant de manière dynamique basés sur ajax. Les amis dans le besoin peuvent s'y référer

Cet article décrit les exemples. jQuery implémente une méthode pour charger automatiquement 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 :

Ici, nous utilisons AJAX pour réaliser la fonction de défilement jusqu'à la fin pour charger les données :

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

Ce qui précède est ce que J'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

À propos du problème d'extraction des fichiers de configuration liés au projet lorsque vue-cli est packagé (tutoriel détaillé)

Création de composants de pile coulissante à l'aide de vue (tutoriel détaillé)

À propos de l'utilisation de fetch pour télécharger des images dans React Native (tutoriel détaillé)

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!