Uniapp封装分页器（类似element分页器）

苡然_

已于 2023-04-25 18:22:11 修改

阅读量530

点赞数 2

文章标签： uni-app javascript 前端 html vue.js

于 2023-04-25 18:20:59 首次发布

本文链接：https://blog.csdn.net/lfqp_/article/details/130371133

版权

该文章展示了一个用Vue.js编写的分页组件，该组件接受总条目数、每页显示条目数和当前页码作为属性，并能计算总页数和显示可点击的页码。组件支持页面切换事件，允许父组件监听并处理页面变化。示例代码包括模板、脚本和样式部分，以及如何在父组件中使用该分页组件。

摘要由CSDN通过智能技术生成

可直接复制使用，效果图：

<template>
  <view class="pagination">
    <text :disabled="page <= 1" @click="gotoPage(page - 1)"><</text>
    <text v-for="item in pages" :key="getItemKey(item)" :class="{ active: item === page, ellipsis: item === '...' }" @click="gotoPage(item)">{{ item }}</text>
    <text :disabled="page >= totalPages" @click="gotoPage(page + 1)">></text>
  </view>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    total: { // 总条目数
      type: Number,
      required: true
    },
    pageSize: { // 每页显示的条目数
      type: Number,
      default: 10
    },
    currentPage: { // 当前页码
      type: Number,
      default: 1
    }
  },
  computed: {
    totalPages() { // 总页数
      return Math.ceil(this.total / this.pageSize)
    },
    page() { // 当前页码，限定在 1 和总页数之间
      return Math.max(1, Math.min(this.currentPage, this.totalPages))
    },
    pages() { // 可点击的页码数组，最多显示 5 个页码
      const arr = []
      let start = Math.max(this.page - 2, 1)
      let end = Math.min(start + 4, this.totalPages)
      if (end - start < 4) {
        end = Math.min(start + 4, this.totalPages)
        start = Math.max(end - 4, 1)
      }
      for (let i = start; i <= end; i++) {
        arr.push(i)
      }
      if (end < this.totalPages) {
        arr.push('...', this.totalPages)
      }
      return arr
    }
  },
  methods: {
    getItemKey(item) { // 获取项的 key
      return typeof item === 'number' ? item.toString() : item
    },
    gotoPage(page) { // 跳转到指定页码
      if (page > 0 && page <= this.totalPages) {
        this.$emit('page-change', page)
      }
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: 20px;
}

text {
  display: inline-block;
  padding: 4px 6px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-right: 5px;
  color: #2bc993;
}

text.active {
  background-color: #2bc993;
  color: #fff;
}

text.ellipsis {
  cursor: default;
}
</style>

<template>
  <view>
	  <pagination :total="total" :page-size="queryParams.pageSize" :current-page="queryParams.pageNum" @page-change="handlePageChange" />
  </view>
</template>

<script>
import Pagination from '@/components/pagination.vue';
export default {
  components: {
    Pagination
  },
  data() {
    return {
	  total: 550,
	  queryParams:{
		pageSize: 33,
		pageNum: 1,
	  },
    };
  },
  methods: {
	//运行记录分页
	handlePageChange(page) {
	  this.queryParams.pageNum = page;
	},
  },
};
</script>

<style lang="scss" scoped>

</style>