vue实现翻页

Vue实现翻页功能

翻页功能通常用于分页展示数据，以下是几种常见的实现方式。

基础分页组件实现

创建一个简单的分页组件，包含上一页、下一页和页码按钮。

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span v-for="page in pages" :key="page">
      <button 
        @click="goToPage(page)"
        :class="{ active: currentPage === page }"
      >
        {{ page }}
      </button>
    </span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    },
    pages() {
      const range = []
      for (let i = 1; i <= this.totalPages; i++) {
        range.push(i)
      }
      return range
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.$emit('page-changed', this.currentPage)
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
        this.$emit('page-changed', this.currentPage)
      }
    },
    goToPage(page) {
      this.currentPage = page
      this.$emit('page-changed', this.currentPage)
    }
  }
}
</script>

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

使用第三方库

对于更复杂的分页需求，可以使用现成的分页库如vuejs-paginate。

安装库：

npm install vuejs-paginate

使用示例：

<template>
  <paginate
    :page-count="totalPages"
    :click-handler="goToPage"
    :prev-text="'上一页'"
    :next-text="'下一页'"
    :container-class="'pagination'"
    :page-class="'page-item'"
  >
  </paginate>
</template>

<script>
import Paginate from 'vuejs-paginate'

export default {
  components: {
    Paginate
  },
  props: {
    totalItems: Number,
    itemsPerPage: {
      type: Number,
      default: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    }
  },
  methods: {
    goToPage(pageNum) {
      this.$emit('page-changed', pageNum)
    }
  }
}
</script>

无限滚动翻页

对于移动端或需要流畅体验的场景，可以实现无限滚动翻页。

<template>
  <div class="infinite-scroll" @scroll="handleScroll">
    <div v-for="item in visibleItems" :key="item.id">
      {{ item.content }}
    </div>
    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: [], // 所有数据
      visibleItems: [], // 当前显示的数据
      pageSize: 10,
      currentPage: 1,
      loading: false
    }
  },
  mounted() {
    this.loadItems()
  },
  methods: {
    async loadItems() {
      this.loading = true
      // 模拟API调用
      const newItems = await this.fetchData(this.currentPage, this.pageSize)
      this.allItems = [...this.allItems, ...newItems]
      this.visibleItems = this.allItems.slice(0, this.currentPage * this.pageSize)
      this.loading = false
    },
    fetchData(page, size) {
      return new Promise(resolve => {
        setTimeout(() => {
          const data = Array.from({ length: size }, (_, i) => ({
            id: (page - 1) * size + i,
            content: `项目 ${(page - 1) * size + i + 1}`
          }))
          resolve(data)
        }, 500)
      })
    },
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target
      if (scrollHeight - (scrollTop + clientHeight) < 50 && !this.loading) {
        this.currentPage++
        this.loadItems()
      }
    }
  }
}
</script>

<style>
.infinite-scroll {
  height: 500px;
  overflow-y: auto;
}
.loading {
  text-align: center;
  padding: 10px;
}
</style>

服务端分页

对于大数据量，建议实现服务端分页，只请求当前页的数据。

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      totalPages: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.$http.get('/api/items', {
          params: {
            page: this.currentPage,
            size: this.pageSize
          }
        })
        this.items = response.data.items
        this.totalPages = response.data.totalPages
      } catch (error) {
        console.error(error)
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.fetchData()
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
        this.fetchData()
      }
    }
  }
}
</script>

以上方法可以根据具体需求选择适合的实现方式。基础分页组件适合简单场景，第三方库提供更多定制选项，无限滚动适合移动端体验，服务端分页处理大数据量更高效。