前端卡片列表展示怎么切换下一页，像table表格那样可以切换不同页面显示

以下是实现前端卡片列表分页切换的步骤及代码示例（使用纯JavaScript和HTML）：

实现思路

1. 数据分页：将数据按每页数量分割。
2. 动态渲染：根据当前页码显示对应数据。
3. 分页控件：生成页码按钮并绑定点击事件。
4. 状态更新：切换页码时重新渲染卡片和分页控件。

HTML结构

<div id="card-container"></div> <!-- 卡片容器 -->
<div id="pagination"></div>   <!-- 分页控件 -->

CSS样式（基础示例）

.card {
  border: 1px solid #ddd;
  padding: 16px;
  margin: 8px;
  border-radius: 4px;
}

.pagination {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.page-btn {
  padding: 8px 12px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: white;
}

.page-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

JavaScript实现

// 模拟数据（假设总数据为30条）
const allData = Array.from({ length: 30 }, (_, i) => ({ id: i + 1, title: `Card ${i + 1}` }));

// 分页配置
const pageSize = 6;  // 每页显示6张卡片
let currentPage = 1; // 当前页码

// 1. 渲染卡片列表
function renderCards() {
  const start = (currentPage - 1) * pageSize;
  const end = start + pageSize;
  const pageData = allData.slice(start, end);

  const container = document.getElementById('card-container');
  container.innerHTML = pageData.map(item => `
    <div class="card">${item.title}</div>
  `).join('');
}

// 2. 渲染分页控件
function renderPagination() {
  const totalPages = Math.ceil(allData.length / pageSize);
  const pagination = document.getElementById('pagination');
  pagination.innerHTML = '';

  // 生成页码按钮
  for (let i = 1; i <= totalPages; i++) {
    const btn = document.createElement('button');
    btn.className = `page-btn ${i === currentPage ? 'active' : ''}`;
    btn.textContent = i;
    btn.onclick = () => {
      currentPage = i;
      renderCards();
      renderPagination();
    };
    pagination.appendChild(btn);
  }

  // 添加上一页/下一页（可选）
  const prevBtn = document.createElement('button');
  prevBtn.textContent = '上一页';
  prevBtn.disabled = currentPage === 1;
  prevBtn.onclick = () => {
    if (currentPage > 1) {
      currentPage--;
      renderCards();
      renderPagination();
    }
  };
  pagination.prepend(prevBtn);

  const nextBtn = document.createElement('button');
  nextBtn.textContent = '下一页';
  nextBtn.disabled = currentPage === totalPages;
  nextBtn.onclick = () => {
    if (currentPage < totalPages) {
      currentPage++;
      renderCards();
      renderPagination();
    }
  };
  pagination.appendChild(nextBtn);
}

// 初始化
renderCards();
renderPagination();

关键点说明

1. 数据分页：通过 slice 方法截取当前页数据。
2. 分页按钮：动态生成按钮并绑定点击事件，点击后更新 currentPage 并重新渲染。
3. 状态反馈：通过 active 类高亮当前页码，禁用不可用的上一页/下一页按钮。
4. 性能优化：仅渲染当前页的卡片，避免一次性加载所有数据。

框架适配（以Vue为例）

<template>
  <div>
    <!-- 卡片列表 -->
    <div v-for="item in currentPageData" :key="item.id" class="card">
      {{ item.title }}
    </div>

    <!-- 分页控件 -->
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <button 
        v-for="page in totalPages" 
        :key="page" 
        @click="currentPage = page"
        :class="{ 'active': currentPage === page }"
      >
        {{ page }}
      </button>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: Array.from({ length: 30 }, (_, i) => ({ id: i + 1, title: `Card ${i + 1}` })),
      pageSize: 6,
      currentPage: 1,
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.allData.length / this.pageSize);
    },
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.allData.slice(start, end);
    },
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    },
  },
};
</script>

总结

• 核心逻辑：数据分块 + 动态渲染 + 分页控件交互。
• 扩展优化：支持异步加载数据（如调用API分页查询）、添加加载状态、自定义每页条数等。
• 注意事项：处理好边界条件（如第一页和最后一页），确保用户体验流畅。