Pagination 分页器

数据量过多时，采用分页的形式将数据分隔，每次只加载一个页面。

导入

import Pagination from '@/components/nav/Pagination.vue';

使用方法

基础用法

通过 pageCount 属性设置总页数，使用 v-model:currentPage 绑定当前页码。

<template>
  <Pagination :pageCount="10" v-model:currentPage="page" />
</template>

<script setup>
import { ref } from 'vue';
import Pagination from '@/components/nav/Pagination.vue';

const page = ref(1);
</script>

简单模式

将 mode 设置为 simple 来切换到简单模式，此时分页器不会展示具体的页码按钮。

<template>
  <Pagination :pageCount="10" simple v-model:currentPage="page" />
</template>

<script setup>
import { ref } from 'vue';
import Pagination from '@/components/nav/Pagination.vue';

const page = ref(1);
</script>

自定义样式

可以设置条目的自定义样式。

<template>
  <Pagination 
    v-model:currentPage="page" 
    :pageCount="10" 
    :buttonStyle="{
      borderRadius: '50rpx',
      margin: '0 4rpx',
    }"
  />
</template>

<script setup>
import { ref } from 'vue';
import Pagination from '@/components/nav/Pagination.vue';

const page = ref(1);
</script>

自定义渲染

允许自定义渲染按钮。

<template>
  <Pagination 
    v-model:currentPage="page"
    :pageCount="10" 
  >
    <template #prev="{ touchable, onClick }">
      <IconButton icon="direction-left" :disabled="!touchable" @click="onClick" />
    </template>
    <template #item="{ text, active, onClick }">
      <Button 
        :text="text" 
        :disabled="active"
        :type="active ? 'primary' : 'warning'"
        size="small"
        round
        @click="onClick" 
      />
    </template>
    <template #next="{ touchable, onClick }">
      <IconButton icon="direction-right" :disabled="!touchable" @click="onClick" />
    </template>
  </Pagination>
</template>

<script setup>
import { ref } from 'vue';
import Pagination from '@/components/nav/Pagination.vue';
import IconButton from '@/components/basic/IconButton.vue';
import Button from '@/components/basic/Button.vue';

const page = ref(1);
</script>

API 参考

Props

名称	说明	类型	必填	默认值
v-model:currentPage	当前的页码	number	否	1
pageCount	总共有的页数	number	否	1
showNextPrev	是否显示上一页下一页按钮	boolean	否	true
showPageCount	同时显示的页面按钮数量	number	否	5
simple	是否简单模式	boolean	否	false
prevText	上一页按钮文字	string	否	'上一页'
nextText	下一页按钮文字	string	否	'下一页'
pressedColor	按钮按下颜色	string	否	'pressed.white'
pressedTextColor	按钮按下时文字的颜色	string	否	'text.second'
activeColor	按钮激活时（为当前页码）颜色	string	否	'primary'
deactiveColor	按钮为非当前页码下颜色	string	否	'white'
activeTextColor	按钮激活时（为当前页码）文字颜色	string	否	'white'
deactiveTextColor	按钮为非当前页码下文字颜色	string	否	'text.content'
buttonStyle	自定义按钮样式	ViewStyle	否	-
textStyle	自定义文字样式	TextStyle	否	-

Slots

名称	说明	参数
prev	自定义上一页按钮	{ onClick: Function, touchable: boolean }
next	自定义下一页按钮	{ onClick: Function, touchable: boolean }
item	自定义页码按钮	{ text: string, index: number, active: boolean, onClick: Function }
simple	简单模式下的文本	{ text: string }

Events

名称	说明	参数
update:currentPage	页码改变时触发	新的页码数值

主题变量

变量名	默认值	说明
PaginationPressedColor	pressed.white	按钮按下颜色
PaginationPressedTextColor	text.second	按钮按下时文字颜色
PaginationActiveColor	primary	按钮激活时颜色
PaginationDeactiveColor	white	按钮非激活时颜色
PaginationActiveTextColor	white	按钮激活时文字颜色
PaginationDeactiveTextColor	text.content	按钮非激活时文字颜色