js实现新闻列表

实现新闻列表的步骤

使用HTML、CSS和JavaScript创建一个动态新闻列表，可以通过API获取数据或使用静态数据。

HTML结构

<div id="news-container">
  <h2>新闻列表</h2>
  <ul id="news-list"></ul>
</div>

CSS样式

#news-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

#news-list {
  list-style: none;
  padding: 0;
}

.news-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.news-item h3 {
  margin-top: 0;
}

.news-item p {
  margin-bottom: 0;
}

JavaScript实现

// 静态数据示例
const newsData = [
  {
    title: "新闻标题1",
    content: "新闻内容摘要1",
    date: "2023-05-01"
  },
  {
    title: "新闻标题2",
    content: "新闻内容摘要2",
    date: "2023-05-02"
  }
];

// 动态渲染新闻列表
function renderNewsList() {
  const newsList = document.getElementById('news-list');

  newsData.forEach(news => {
    const li = document.createElement('li');
    li.className = 'news-item';
    li.innerHTML = `
      <h3>${news.title}</h3>
      <p>${news.content}</p>
      <small>${news.date}</small>
    `;
    newsList.appendChild(li);
  });
}

// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', renderNewsList);

从API获取数据

如果需要从后端API获取数据，可以使用fetch或axios：

async function fetchNews() {
  try {
    const response = await fetch('https://api.example.com/news');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('获取新闻数据失败:', error);
    return [];
  }
}

async function renderNewsList() {
  const newsList = document.getElementById('news-list');
  const newsData = await fetchNews();

  newsData.forEach(news => {
    const li = document.createElement('li');
    li.className = 'news-item';
    li.innerHTML = `
      <h3>${news.title}</h3>
      <p>${news.content}</p>
      <small>${news.date}</small>
    `;
    newsList.appendChild(li);
  });
}

添加分页功能

对于大量新闻数据，可以添加分页功能：

let currentPage = 1;
const pageSize = 10;

async function fetchNews(page) {
  const response = await fetch(`https://api.example.com/news?page=${page}&size=${pageSize}`);
  return await response.json();
}

function renderPagination(totalPages) {
  const pagination = document.createElement('div');
  pagination.className = 'pagination';

  for (let i = 1; i <= totalPages; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.textContent = i;
    pageBtn.addEventListener('click', async () => {
      currentPage = i;
      await renderNewsList();
    });
    pagination.appendChild(pageBtn);
  }

  document.getElementById('news-container').appendChild(pagination);
}

优化用户体验

添加加载状态和错误处理：

async function renderNewsList() {
  const newsList = document.getElementById('news-list');
  newsList.innerHTML = '<div class="loading">加载中...</div>';

  try {
    const newsData = await fetchNews(currentPage);
    newsList.innerHTML = '';

    if (newsData.length === 0) {
      newsList.innerHTML = '<div class="no-data">暂无新闻</div>';
      return;
    }

    newsData.forEach(news => {
      const li = document.createElement('li');
      li.className = 'news-item';
      li.innerHTML = `
        <h3>${news.title}</h3>
        <p>${news.content}</p>
        <small>${news.date}</small>
      `;
      newsList.appendChild(li);
    });

    renderPagination(Math.ceil(newsData.total / pageSize));
  } catch (error) {
    newsList.innerHTML = '<div class="error">加载新闻失败</div>';
  }
}

这个实现包含了静态数据渲染、API数据获取、分页功能和用户体验优化，可以根据实际需求进行调整和扩展。