vue中实现翻页功能

vue中实现翻页功能

在Vue中实现翻页功能通常需要结合分页组件和数据请求逻辑，以下是常见的实现方法：

使用Element UI的分页组件

安装Element UI后，可以直接使用其分页组件：

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

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dataList: []
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 模拟API请求
      const params = {
        page: this.currentPage,
        size: this.pageSize
      }
      // 实际项目中替换为真实API调用
      mockApi(params).then(res => {
        this.dataList = res.data
        this.total = res.total
      })
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

自定义分页组件

如果需要完全自定义分页组件，可以这样实现：

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

    <span 
      v-for="page in pageRange" 
      :key="page"
      @click="changePage(page)"
      :class="{active: page === currentPage}">
      {{ page }}
    </span>

    <button 
      :disabled="currentPage === totalPages" 
      @click="changePage(currentPage + 1)">
      下一页
    </button>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: Number,
    itemsPerPage: Number,
    currentPage: Number
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    },
    pageRange() {
      const range = []
      for (let i = 1; i <= this.totalPages; i++) {
        range.push(i)
      }
      return range
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-changed', page)
      }
    }
  }
}
</script>

<style>
.pagination {
  display: flex;
  gap: 5px;
}
.pagination span {
  cursor: pointer;
  padding: 5px 10px;
}
.pagination span.active {
  background: #409eff;
  color: white;
}
</style>

结合Vuex管理分页状态

在大型应用中，可以使用Vuex集中管理分页状态：

// store/modules/pagination.js
const state = {
  currentPage: 1,
  pageSize: 10,
  total: 0
}

const mutations = {
  SET_PAGE(state, page) {
    state.currentPage = page
  },
  SET_PAGE_SIZE(state, size) {
    state.pageSize = size
  },
  SET_TOTAL(state, total) {
    state.total = total
  }
}

export default {
  namespaced: true,
  state,
  mutations
}

组件中使用：

<template>
  <div>
    <el-pagination
      @size-change="setPageSize"
      @current-change="setCurrentPage"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState('pagination', ['currentPage', 'pageSize', 'total'])
  },
  methods: {
    ...mapMutations('pagination', ['SET_PAGE', 'SET_PAGE_SIZE']),
    setCurrentPage(page) {
      this.SET_PAGE(page)
      this.fetchData()
    },
    setPageSize(size) {
      this.SET_PAGE_SIZE(size)
      this.fetchData()
    }
  }
}
</script>

无限滚动分页

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

<template>
  <div class="infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy">
    <div v-for="item in items" :key="item.id">
      {{ item.content }}
    </div>
    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      busy: false,
      loading: false,
      hasMore: true
    }
  },
  methods: {
    loadMore() {
      if (!this.hasMore || this.busy) return

      this.busy = true
      this.loading = true

      fetchData(this.page).then(res => {
        this.items = [...this.items, ...res.data]
        this.page++
        this.hasMore = res.hasMore
        this.busy = false
        this.loading = false
      })
    }
  },
  created() {
    this.loadMore()
  }
}
</script>

以上方法涵盖了Vue中实现分页的常见场景，可以根据项目需求选择合适的方式。