vue实现新闻分页

Vue 实现新闻分页的方法

数据准备与分页逻辑

在 Vue 中实现新闻分页需要准备新闻数据列表和分页参数。通常使用 currentPage 表示当前页码，pageSize 表示每页显示的新闻数量。通过计算属性 paginatedNews 实现数据分页：

data() {
  return {
    newsList: [], // 从API获取的新闻数据
    currentPage: 1,
    pageSize: 10
  };
},
computed: {
  paginatedNews() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.newsList.slice(start, end);
  }
}

分页组件集成

使用 Element UI 或自定义分页组件实现分页导航。以 Element UI 为例：

<el-pagination
  @current-change="handlePageChange"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="newsList.length"
  layout="prev, pager, next">
</el-pagination>

methods: {
  handlePageChange(page) {
    this.currentPage = page;
  }
}

异步数据加载

若新闻数据需要从后端API获取，可在 created 或 mounted 钩子中调用接口，并确保分页参数传递给后端：

async fetchNews() {
  const res = await axios.get('/api/news', {
    params: {
      page: this.currentPage,
      size: this.pageSize
    }
  });
  this.newsList = res.data.list;
  this.total = res.data.total; // 总数据量
}

自定义分页组件

如需自定义分页组件，可通过计算总页数并渲染页码按钮：

<div class="pagination">
  <button 
    v-for="page in totalPages" 
    :key="page"
    @click="currentPage = page"
    :class="{ active: currentPage === page }">
    {{ page }}
  </button>
</div>

computed: {
  totalPages() {
    return Math.ceil(this.newsList.length / this.pageSize);
  }
}

样式与交互优化

为分页按钮添加样式和交互效果，例如禁用上一页/下一页按钮当到达首页或末页：

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
}
.pagination button.active {
  background: #42b983;
  color: white;
}

computed: {
  isFirstPage() {
    return this.currentPage === 1;
  },
  isLastPage() {
    return this.currentPage >= this.totalPages;
  }
}