Maison >interface Web >js tutoriel >Comment créer une liste d'actualités à défilement infini en utilisant HTML, CSS et jQuery

Comment créer une liste d'actualités à défilement infini en utilisant HTML, CSS et jQuery

WBOYoriginal: 2023-10-24 11:00:181425parcourir

Comment créer une liste dactualités à défilement infini en utilisant HTML, CSS et jQuery

Dans le développement Web, le défilement infini est une technologie d'interaction courante, particulièrement adaptée aux pages telles que les listes d'actualités qui doivent charger une grande quantité de données. Cet article expliquera comment utiliser HTML, CSS et jQuery pour implémenter une liste d'actualités à défilement infini et fournira des exemples de code spécifiques.

Tout d'abord, nous avons besoin d'une structure HTML de base pour afficher la liste des actualités. Voici un exemple simple :

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>无限滚动新闻列表</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="news-list">
    <ul>
      <!-- 这里将显示动态加载的新闻 -->
    </ul>
    <div id="loading-indicator">正在加载更多...</div>
  </div>

  <script src="jquery.js"></script>
  <script src="script.js"></script>
</body>
</html>

Ensuite, nous devons configurer un style CSS de base pour cette liste d'actualités. Créez un fichier appelé style.css et ajoutez le code suivant : style.css 的文件，并添加以下代码：

#news-list {
  overflow-y: scroll;
  height: 400px;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
#loading-indicator {
  text-align: center;
  padding: 10px;
  color: #999;
}

在这个示例中，我们设置了新闻列表容器 #news-list 的高度为 400px，并使用 overflow-y: scroll; 属性来实现垂直滚动。新闻列表的样式使用了无序列表 ul 和列表项 li，并为列表项添加了一条灰色的底边线。加载更多提示信息的样式在 #loading-indicator 中设置。

好了，现在我们来撰写 JavaScript 代码，使用 jQuery 实现无限滚动效果。创建一个名为 script.js 的文件，并添加以下代码：

$(document).ready(function() {
  var page = 1;
  var loading = false;

  function loadData() {
    if (loading) return;

    loading = true;
    $('#loading-indicator').show();

    // 发起异步请求加载数据
    $.ajax({
      url: 'news.php', // 替换为加载数据的API地址
      type: 'GET',
      data: { page: page },
      success: function(data) {
        // 数据加载成功后的处理
        if (data.length > 0) {
          $('#news-list ul').append(data);
          page++;
        }

        loading = false;
        $('#loading-indicator').hide();
      }
    });
  }

  // 初始化加载第一页的数据
  loadData();

  // 当滚动到底部时触发加载下一页数据
  $('#news-list').scroll(function() {
    var distance = $('#news-list ul').outerHeight() - $('#news-list').scrollTop() - $('#news-list').height();
    if (distance < 50) {
      loadData();
    }
  });
});

在这段代码中，我们首先定义了一个变量 page 表示当前加载的页数，以及一个变量 loading 表示是否正在加载数据。loadData 函数中，我们判断当前是否有数据正在加载，如果有则直接返回，否则显示加载提示信息，并且发送异步请求获取新闻数据。在请求成功后，将新闻数据追加到新闻列表中，并更新页数。最后，隐藏加载提示信息并将 loading 标记设置为 false。

完成以上代码后，我们需要创建一个名为 news.php 的服务器端接口文件，用于模拟后端数据。以下是一个简单的示例：

<?php
$page = $_GET['page'];
$pageSize = 10;
$start = ($page - 1) * $pageSize;

$data = [];

// 模拟加载数据
for ($i = 1; $i <= $pageSize; $i++) {
  $data[] = '<li>新闻标题 ' . ($start + $i) . '</li>';
}

echo implode('', $data);

在这个示例中，我们使用 $page 来获取当前请求的页数，并使用 $pageSize 设置每页显示的新闻数量。然后，通过一个简单的循环来生成模拟的新闻数据，并返回给前端。

最后，将下载好的 jQuery 文件 jquery.js 和页面所需的样式文件 style.css、脚本文件 script.js 和服务器端接口文件 news.phprrreee

Dans cet exemple, nous définissons la hauteur du conteneur de la liste d'actualités #news-list à 400px, et utilisez l'attribut overflow-y: scroll; pour obtenir un défilement vertical. Le style de la liste d'actualités utilise une liste non ordonnée ul et des éléments de liste li, et ajoute une ligne inférieure grise aux éléments de la liste. Le style de chargement d'informations d'invite supplémentaires est défini dans #loading-indicator.

D'accord, écrivons maintenant du code JavaScript et utilisons jQuery pour obtenir l'effet de défilement infini. Créez un fichier appelé script.js et ajoutez le code suivant : 🎜rrreee🎜Dans ce code, nous définissons d'abord une variable page pour représenter le numéro de page actuellement chargé, et un variable loading indiquant si les données sont en cours de chargement. Dans la fonction loadData, nous déterminons si des données sont actuellement en cours de chargement, et si c'est le cas, revenons directement. Sinon, les informations d'invite de chargement sont affichées et une requête asynchrone est envoyée pour obtenir des données d'actualité. Une fois la demande réussie, les données d'actualités sont ajoutées à la liste d'actualités et le numéro de page est mis à jour. Enfin, masquez l'invite de chargement et définissez la balise loading sur false. 🎜🎜Après avoir terminé le code ci-dessus, nous devons créer un fichier d'interface côté serveur nommé news.php pour simuler les données back-end. Voici un exemple simple : 🎜rrreee🎜Dans cet exemple, nous utilisons $page pour obtenir le nombre de pages actuellement demandées, et utilisons $pageSize pour définir la taille affichée sur chaque page Nombre de nouvelles. Ensuite, les données d'actualités simulées sont générées via une simple boucle et renvoyées au front-end. 🎜🎜Enfin, téléchargez le fichier jQuery jquery.js ainsi que le fichier de style style.css et le fichier de script script.js requis pour la page Place dans le même répertoire que le fichier d'interface côté serveur news.php. 🎜🎜Ce qui précède sont les étapes de base et des exemples de code pour créer une liste d'actualités à défilement infini en utilisant HTML, CSS et jQuery. Vous pouvez ajuster le style en fonction des besoins réels et modifier le fichier d'interface côté serveur pour charger de vraies données d'actualité. J'espère que cet article vous sera utile et je vous souhaite de mettre en œuvre une élégante liste d'actualités à défilement infini ! 🎜

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!

php JavaScript jquery css html 循环接口 JS 异步 overflow ul li

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：HTML, CSS et jQuery : créez une belle navigation à défilement verticalArticle suivant：HTML, CSS et jQuery : créez une belle navigation à défilement vertical

Articles Liés

Voir plus