当前位置：首页 > VUE

vue实现新闻分页

2026-01-17 10:31:50VUE

Vue 实现新闻分页的方法

数据准备与分页逻辑

在 Vue 中实现新闻分页需要准备新闻数据列表和分页参数。通常使用 data 属性存储当前页码和每页显示的新闻数量。

data() {
  return {
    newsList: [], // 所有新闻数据
    currentPage: 1, // 当前页码
    pageSize: 10, // 每页显示的新闻数量
    totalNews: 0 // 新闻总数
  }
}

计算属性可以用于获取当前页的新闻数据：

computed: {
  paginatedNews() {
    const start = (this.currentPage - 1) * this.pageSize
    const end = start + this.pageSize
    return this.newsList.slice(start, end)
  }
}

分页组件实现

可以使用第三方分页组件如 el-pagination（Element UI）或自定义分页组件：

<template>
  <div>
    <!-- 新闻列表展示 -->
    <div v-for="news in paginatedNews" :key="news.id">
      {{ news.title }}
    </div>

    <!-- 分页组件 -->
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalNews"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

分页事件处理

处理页码变化事件，更新当前页码并重新获取数据：

methods: {
  handlePageChange(page) {
    this.currentPage = page
    // 如果需要从API获取数据
    this.fetchNews()
  },
  fetchNews() {
    // 模拟API请求
    const params = {
      page: this.currentPage,
      size: this.pageSize
    }
    // 实际项目中这里调用API
    axios.get('/api/news', { params }).then(res => {
      this.newsList = res.data.list
      this.totalNews = res.data.total
    })
  }
}

后端API配合

后端API需要支持分页参数，通常接收 page 和 size 参数：

// Express 示例
app.get('/api/news', (req, res) => {
  const { page = 1, size = 10 } = req.query
  const offset = (page - 1) * size
  const news = db.news.slice(offset, offset + size)
  res.json({
    list: news,
    total: db.news.length
  })
})

样式优化

为分页组件添加样式，确保用户体验良好：

.pagination-container {
  margin-top: 20px;
  text-align: center;
}
.news-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

响应式处理

针对不同屏幕尺寸调整每页显示数量：

vue实现新闻分页

mounted() {
  this.adjustPageSize()
  window.addEventListener('resize', this.adjustPageSize)
},
methods: {
  adjustPageSize() {
    this.pageSize = window.innerWidth < 768 ? 5 : 10
  }
}

以上方法实现了基本的新闻分页功能，可以根据项目需求进行调整和扩展。