Vue.js中如何固定页脚到底部并实现书籍列表分页展示

修复方案 #

一、解决页脚位置异常问题 #

你当前页脚位置错乱的核心原因是：页脚放在了DisplayBooks.vue的flex布局容器carddisplay-section内，该容器设置了flex-wrap: wrap，页脚会被当作flex子项和书籍卡片挤在同一行排布。按以下步骤修改即可：

1. 调整Dashboard.vue主容器布局，让页面占满视口高度
   给.main添加样式：

.main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 60px; /* 抵消顶部固定导航栏的高度 */
}

2. 迁移页脚到Dashboard.vue
   将DisplayBooks.vue内的<footer>代码删除，放到Dashboard.vue模板的最底部：

<DisplayBooks />
    <footer class="site-footer">
       Copyright © 2020, Bookstore Private Limited. All Rights Reserved
    </footer>
</div>

3. 给页脚添加贴底样式
   在Dashboard.vue的样式块中添加：

.site-footer {
  margin-top: auto; /* 自动撑开上边距，将页脚永久推到容器最底部 */
  padding: 12px 0;
  text-align: center;
  background: #f5f5f5;
  font-size: 14px;
  color: #666;
}

二、实现每页3行书籍、分页展示功能 #

按你现有卡片的宽度和边距计算，每行可展示4本，3行即每页展示12本，可根据实际需求调整数值：

1. 在DisplayBooks.vue中添加分页状态
   在data中新增两个变量：

currentPage: 1,
pageSize: 12, // 3行 * 4本/行 = 每页12本

2. 添加分页计算属性
   在export default内新增computed配置：

computed: {
  // 过滤当前页需要展示的书籍
  paginatedBooks() {
    const startIdx = (this.currentPage - 1) * this.pageSize
    return this.books.slice(startIdx, startIdx + this.pageSize)
  },
  // 计算总页数
  totalPage() {
    return Math.ceil(this.books.length / this.pageSize)
  }
}

3. 修改书籍循环逻辑
   将模板中v-for的遍历对象从books改为paginatedBooks：

<div v-for="book in paginatedBooks" :key="book.id" class="card">

4. 添加分页切换控件
   在DisplayBooks.vue的卡片容器结束标签后新增分页按钮：

</div>
    <div class="pagination-wrap" v-if="totalPage > 1">
      <button @click="currentPage--" :disabled="currentPage === 1">上一页</button>
      <span>第 {{currentPage}} 页 / 共 {{totalPage}} 页</span>
      <button @click="currentPage++" :disabled="currentPage === totalPage">下一页</button>
    </div>
</div>

添加分页控件样式：

.pagination-wrap {
  width: 100%;
  text-align: center;
  margin: 20px 0;
  button {
    padding: 6px 12px;
    margin: 0 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    &:disabled {
      background: #f5f5f5;
      cursor: not-allowed;
      color: #999;
    }
  }
}

修改完成后页脚会自动适配内容高度，始终显示在页面最底部，同时每页仅展示3行书籍，点击分页按钮可切换查看剩余内容。

内容的提问来源于stack exchange，提问作者Sravani