vue.js 移动端分页

npm install vue-pagination-2

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>
    <pagination :records="totalRecords" :per-page="perPage" @paginate="fetchData" />
  </div>
</template>

<script>
import Pagination from 'vue-pagination-2';

export default {
  components: {
    Pagination
  },
  data() {
    return {
      items: [], // 所有数据
      paginatedData: [], // 当前页数据
      totalRecords: 0,
      perPage: 10,
      currentPage: 1
    };
  },
  methods: {
    fetchData(page) {
      // 模拟获取数据
      this.paginatedData = this.items.slice((page - 1) * this.perPage, page * this.perPage);
      this.totalRecords = this.items.length;
    }
  },
  mounted() {
    // 初始化数据
    this.items = Array.from({ length: 100 }, (_, i) => ({ id: i, name: `Item ${i}` }));
    this.fetchData(this.currentPage);
  }
};
</script>