Bagaimana untuk mencipta senarai berita tatal tak terhingga menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Bagaimana untuk mencipta senarai berita tatal tak terhingga menggunakan HTML, CSS dan jQuery

WBOY

Lepaskan： 2023-10-24 11:00:18

asal

1355 orang telah melayarinya

Bagaimana untuk mencipta senarai berita tatal tak terhingga menggunakan HTML, CSS dan jQuery

Cara membuat senarai berita tatal tak terhingga menggunakan HTML, CSS dan jQuery

Dalam pembangunan web, tatal tak terhingga ialah teknologi interaksi biasa, terutamanya sesuai untuk halaman seperti senarai berita yang perlu memuatkan sejumlah besar data. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk melaksanakan senarai berita tatal tak terhingga dan memberikan contoh kod khusus.

Pertama, kita memerlukan struktur HTML asas untuk memaparkan senarai berita. Berikut ialah contoh mudah:

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

Salin selepas log masuk

Seterusnya, kita perlu menyediakan beberapa penggayaan CSS asas untuk senarai berita ini. Cipta fail bernama style.css dan tambahkan kod berikut: 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;
}

Salin selepas log masuk

在这个示例中，我们设置了新闻列表容器 #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();
    }
  });
});

Salin selepas log masuk

在这段代码中，我们首先定义了一个变量 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);

Salin selepas log masuk

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

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

Dalam contoh ini, kami menetapkan ketinggian bekas senarai berita #news-list kepada 400px, dan gunakan atribut overflow-y: scroll; untuk mencapai penatalan menegak. Gaya senarai berita menggunakan senarai tidak tertib ul dan item senarai li, serta menambah garis bawah kelabu pada item senarai. Gaya memuatkan lebih banyak maklumat segera ditetapkan dalam #loading-indicator.

Baiklah, sekarang mari tulis kod JavaScript dan gunakan jQuery untuk mencapai kesan tatal tak terhingga. Cipta fail bernama script.js dan tambahkan kod berikut: 🎜rrreee🎜Dalam kod ini, kami mula-mula mentakrifkan pembolehubah halaman untuk mewakili nombor halaman yang sedang dimuatkan dan pembolehubah loading menunjukkan sama ada data sedang dimuatkan. Dalam fungsi loadData, kami menentukan sama ada terdapat data sedang dimuatkan, dan jika ya, kembalikan terus Jika tidak, maklumat segera pemuatan dipaparkan dan permintaan tak segerak dihantar untuk mendapatkan data berita. Selepas permintaan berjaya, data berita dilampirkan pada senarai berita dan nombor halaman dikemas kini. Akhir sekali, sembunyikan gesaan pemuatan dan tetapkan teg loading kepada false. 🎜🎜Selepas melengkapkan kod di atas, kami perlu mencipta fail antara muka sebelah pelayan bernama news.php untuk mensimulasikan data bahagian belakang. Berikut ialah contoh mudah: 🎜rrreee🎜Dalam contoh ini, kami menggunakan $page untuk mendapatkan bilangan halaman yang diminta pada masa ini dan menggunakan $pageSize untuk menetapkan saiz yang dipaparkan pada setiap muka surat Bilangan berita. Kemudian, data berita simulasi dijana melalui gelung mudah dan dikembalikan ke bahagian hadapan. 🎜🎜Akhir sekali, muat turun fail jQuery jquery.js dan fail gaya style.css dan fail skrip script.js yang diperlukan untuk halaman Place ia dalam direktori yang sama dengan fail antara muka sebelah pelayan news.php. 🎜🎜Di atas ialah langkah asas dan contoh kod untuk mencipta senarai berita tatal tak terhingga menggunakan HTML, CSS dan jQuery. Anda boleh melaraskan gaya mengikut keperluan sebenar dan mengubah suai fail antara muka sebelah pelayan untuk memuatkan data berita sebenar. Saya harap artikel ini membantu anda, dan saya ingin anda melaksanakan senarai berita tatal tak terhingga yang elegan! 🎜

Atas ialah kandungan terperinci Bagaimana untuk mencipta senarai berita tatal tak terhingga menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!