HTML、CSS、jQueryを使用して無限スクロールのニュースリストを作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQueryを使用して無限スクロールのニュースリストを作成する方法

WBOY

リリース： 2023-10-24 11:00:18

オリジナル

1393 人が閲覧しました

HTML、CSS、jQueryを使用して無限スクロールのニュースリストを作成する方法

HTML、CSS、jQuery を使用して無限スクロールニュースリストを作成する方法

Web 開発では、無限スクロールは一般的なインタラクション手法であり、特に次のようなページに適しています。大量のデータをロードする必要があるニュースリスト。この記事では、HTML、CSS、jQuery を使用して無限スクロールのニュースリストを実装する方法と、具体的なコード例を紹介します。

まず、ニュースリストを表示するための基本的な HTML 構造が必要です。簡単な例を次に示します。

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

ログイン後にコピー

次に、このニュースリスト用にいくつかの基本的な CSS スタイルを設定する必要があります。 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.php と同じディレクトリに配置します。

上記は、HTML、CSS、jQuery を使用して無限スクロールニュースリストを作成する基本的な手順とコード例です。実際のニーズに応じてスタイルを調整し、サーバー側のインターフェイスファイルを変更して実際のニュースデータを読み込むことができます。この記事があなたのお役に立てば幸いです。また、エレガントな無限スクロールニュースリストを実装していただきたいと願っています。

以上がHTML、CSS、jQueryを使用して無限スクロールのニュースリストを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。