Heim > Artikel > Web-Frontend > So erstellen Sie mit HTML, CSS und jQuery eine endlos scrollbare Nachrichtenliste

So erstellen Sie mit HTML, CSS und jQuery eine endlos scrollbare Nachrichtenliste

WBOYOriginal: 2023-10-24 11:00:181317Durchsuche

So erstellen Sie eine Nachrichtenliste mit unendlichem Scrollen mit HTML, CSS und jQuery

In der Webentwicklung ist das unendliche Scrollen eine gängige Interaktionstechnologie, die sich besonders für Seiten wie Nachrichtenlisten eignet, die große Datenmengen laden müssen. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery eine Nachrichtenliste mit unendlichem Bildlauf implementieren, und es werden spezifische Codebeispiele bereitgestellt.

Zuerst benötigen wir eine grundlegende HTML-Struktur, um die Nachrichtenliste anzuzeigen. Hier ist ein einfaches Beispiel:

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

Als nächstes müssen wir einige grundlegende CSS-Stile für diese Nachrichtenliste einrichten. Erstellen Sie eine Datei mit dem Namen style.css und fügen Sie den folgenden Code hinzu: 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

In diesem Beispiel setzen wir die Höhe des Nachrichtenlistencontainers #news-list auf 400 Pixel. und verwenden Sie das Attribut overflow-y: scroll;, um vertikales Scrollen zu erreichen. Der Stil der Nachrichtenliste verwendet eine ungeordnete Liste ul und Listenelemente li und fügt den Listenelementen eine graue untere Zeile hinzu. Der Stil zum Laden weiterer Eingabeaufforderungsinformationen wird in #loading-indicator festgelegt.

Okay, jetzt schreiben wir JavaScript-Code und verwenden jQuery, um den unendlichen Scroll-Effekt zu erzielen. Erstellen Sie eine Datei mit dem Namen script.js und fügen Sie den folgenden Code hinzu: 🎜rrreee🎜In diesem Code definieren wir zunächst eine Variable page, um die aktuell geladene Seitennummer darzustellen, und a Variable loading, die angibt, ob Daten geladen werden. In der Funktion loadData ermitteln wir, ob derzeit Daten geladen werden, und kehren in diesem Fall direkt zurück. Andernfalls werden die Informationen zur Ladeaufforderung angezeigt und eine asynchrone Anfrage zum Abrufen von Nachrichtendaten gesendet. Nachdem die Anfrage erfolgreich war, werden die Nachrichtendaten an die Nachrichtenliste angehängt und die Seitenzahl aktualisiert. Zum Schluss blenden Sie die Ladeaufforderung aus und setzen das Tag loading auf false. 🎜🎜Nach Abschluss des obigen Codes müssen wir eine serverseitige Schnittstellendatei mit dem Namen news.php erstellen, um Back-End-Daten zu simulieren. Hier ist ein einfaches Beispiel: 🎜rrreee🎜In diesem Beispiel verwenden wir $page, um die Anzahl der aktuell angeforderten Seiten abzurufen, und verwenden $pageSize, um die angezeigte Größe festzulegen jede Seite Anzahl der Nachrichten. Anschließend werden simulierte Nachrichtendaten über eine einfache Schleife generiert und an das Frontend zurückgegeben. 🎜🎜Laden Sie abschließend die jQuery-Datei jquery.js sowie die Stildatei style.css und die Skriptdatei script.js herunter, die für die Seite Place erforderlich sind es im selben Verzeichnis wie die serverseitige Schnittstellendatei news.php. 🎜🎜Das Obige sind die grundlegenden Schritte und Codebeispiele zum Erstellen einer unendlich scrollbaren Nachrichtenliste mit HTML, CSS und jQuery. Sie können den Stil entsprechend den tatsächlichen Anforderungen anpassen und die serverseitige Schnittstellendatei ändern, um echte Nachrichtendaten zu laden. Ich hoffe, dass dieser Artikel für Sie hilfreich ist, und ich wünsche Ihnen, dass Sie eine elegante Nachrichtenliste mit unendlichem Bildlauf implementieren! 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit HTML, CSS und jQuery eine endlos scrollbare Nachrichtenliste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

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：HTML, CSS und jQuery: Erstellen Sie eine schöne vertikale Scroll-NavigationNächster Artikel：HTML, CSS und jQuery: Erstellen Sie eine schöne vertikale Scroll-Navigation

In Verbindung stehende Artikel

Mehr sehen