vue实现文档翻页

Vue实现文档翻页的方法

使用v-for和计算属性分页

通过计算属性对数据进行分页处理，结合v-for渲染当前页内容。

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

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      allData: [] // 这里存放所有文档数据
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.allData.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.allData.length / this.pageSize)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    }
  }
}
</script>

使用第三方库vue-awesome-paginate

安装vue-awesome-paginate可以快速实现美观的分页组件。

npm install vue-awesome-paginate

<template>
  <div>
    <div v-for="item in paginatedData" :key="item.id">{{ item.content }}</div>
    <vue-awesome-paginate
      :total-items="allData.length"
      :items-per-page="pageSize"
      v-model="currentPage"
    />
  </div>
</template>

<script>
import { VueAwesomePaginate } from 'vue-awesome-paginate'

export default {
  components: {
    VueAwesomePaginate
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      allData: []
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.allData.slice(start, end)
    }
  }
}
</script>

结合后端API实现分页

对于大量数据，建议采用后端分页方式，每次只请求当前页数据。

<template>
  <div>
    <div v-for="item in pageData" :key="item.id">{{ item.content }}</div>
    <button @click="loadPage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }}</span>
    <button @click="loadPage(currentPage + 1)" :disabled="isLastPage">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageData: [],
      isLastPage: false
    }
  },
  methods: {
    async loadPage(page) {
      const response = await fetch(`/api/documents?page=${page}`)
      const data = await response.json()
      this.pageData = data.items
      this.currentPage = page
      this.isLastPage = data.isLastPage
    }
  },
  created() {
    this.loadPage(1)
  }
}
</script>

实现无限滚动分页

对于移动端或需要流畅浏览体验的场景，可以使用无限滚动方式。

<template>
  <div class="document-container" @scroll="handleScroll">
    <div v-for="item in loadedData" :key="item.id">{{ item.content }}</div>
    <div v-if="isLoading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadedData: [],
      currentPage: 1,
      isLoading: false,
      hasMore: true
    }
  },
  methods: {
    async loadMore() {
      if (this.isLoading || !this.hasMore) return

      this.isLoading = true
      const response = await fetch(`/api/documents?page=${this.currentPage}`)
      const data = await response.json()

      this.loadedData = [...this.loadedData, ...data.items]
      this.currentPage++
      this.hasMore = data.hasMore
      this.isLoading = false
    },
    handleScroll(e) {
      const bottomOffset = e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight
      if (bottomOffset < 50) {
        this.loadMore()
      }
    }
  },
  created() {
    this.loadMore()
  }
}
</script>

<style>
.document-container {
  height: 500px;
  overflow-y: auto;
}
</style>

使用Element UI的分页组件

如果项目中使用Element UI，可以直接使用其分页组件。

<template>
  <div>
    <el-table :data="pageData" style="width: 100%">
      <el-table-column prop="content" label="内容"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      pageData: []
    }
  },
  methods: {
    async handlePageChange(page) {
      this.currentPage = page
      await this.fetchData()
    },
    async fetchData() {
      const response = await fetch(`/api/documents?page=${this.currentPage}&size=${this.pageSize}`)
      const data = await response.json()
      this.pageData = data.items
      this.totalItems = data.total
    }
  },
  created() {
    this.fetchData()
  }
}
</script>