vue实现翻页效果

实现基础翻页功能

使用Vue的v-for指令和计算属性实现数据分页展示。核心逻辑是通过计算属性paginatedData动态返回当前页的数据片段。

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>当前页: {{ currentPage }}</span>
    <button @click="nextPage" :disabled="currentPage >= pageCount">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...], // 你的数据数组
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    pageCount() {
      return Math.ceil(this.items.length / this.itemsPerPage)
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.items.slice(start, end)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    }
  }
}
</script>

添加页码导航器

扩展基础功能，显示可点击的页码按钮。使用v-for循环生成页码按钮，并通过计算属性控制显示范围。

<template>
  <div class="pagination">
    <button @click="goToPage(1)" :disabled="currentPage === 1">首页</button>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>

    <button 
      v-for="page in displayedPages" 
      :key="page"
      @click="goToPage(page)"
      :class="{ active: currentPage === page }"
    >
      {{ page }}
    </button>

    <button @click="nextPage" :disabled="currentPage === pageCount">下一页</button>
    <button @click="goToPage(pageCount)" :disabled="currentPage === pageCount">末页</button>
  </div>
</template>

<script>
export default {
  computed: {
    displayedPages() {
      const range = 2 // 显示当前页前后各2页
      let start = Math.max(1, this.currentPage - range)
      let end = Math.min(this.pageCount, this.currentPage + range)

      if (this.currentPage - start < range) {
        end = Math.min(this.pageCount, end + (range - (this.currentPage - start)))
      }
      if (end - this.currentPage < range) {
        start = Math.max(1, start - (range - (end - this.currentPage)))
      }

      const pages = []
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      return pages
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page
    }
  }
}
</script>

<style>
.pagination button.active {
  background-color: #42b983;
  color: white;
}
</style>

使用第三方分页组件

对于更复杂的需求，可以考虑使用现成的Vue分页组件如vue-paginate或element-ui的分页组件。

安装element-ui分页组件：

npm install element-ui

使用示例：

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="itemsPerPage"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalItems">
  </el-pagination>
</template>

<script>
import { ElPagination } from 'element-ui'

export default {
  components: {
    ElPagination
  },
  methods: {
    handleSizeChange(val) {
      this.itemsPerPage = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

服务器端分页实现

当数据量很大时，需要结合API实现服务器端分页。通过axios发送分页参数到后端，接收分页结果。

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      itemsPerPage: 10,
      totalItems: 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get('/api/items', {
        params: {
          page: this.currentPage,
          size: this.itemsPerPage
        }
      }).then(response => {
        this.items = response.data.items
        this.totalItems = response.data.total
      })
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    }
  }
}
</script>

分页性能优化

对于前端分页大数据量场景，可以采用虚拟滚动技术优化性能。使用vue-virtual-scroller等库实现。

安装：

npm install vue-virtual-scroller

实现示例：

<template>
  <RecycleScroller
    class="scroller"
    :items="paginatedData"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">{{ item.name }}</div>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: {
    RecycleScroller
  }
}
</script>

<style>
.scroller {
  height: 500px;
}
</style>