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

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

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

まず、ニュース リストを表示するための基本的な 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という名前のサーバー側インターフェイス ファイルを作成する必要があります。簡単な例を次に示します。

新闻标题 ' . ($start + $i) . ''; } echo implode('', $data);

この例では、$pageを使用して現在リクエストされているページ数を取得し、$pageSizeを使用して各ページの数を設定します。表示されるニュース項目の数。次に、単純なループを通じてシミュレートされたニュース データが生成され、フロント エンドに返されます。

最後に、ページに必要な jQuery ファイルjquery.js、スタイル ファイルstyle.css、スクリプト ファイルscript.js## をダウンロードします。 # サーバー側インターフェイス ファイルnews.phpと同じディレクトリに配置します。

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