# Pagination-分页组件

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

# 示例

# 基础用法

<template>
  <pi-pagination v-model="baseUsed" :total="300" />
</template>

<script>
export default {
  data() {
    return {
      baseUsed: 2
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 设置填充模式

可通过 active-mode 设置填充模式

fill: 背景色填充

text: 文字填充

<template>
  <pi-pagination
    v-model="fill"
    :total="300"
    :limit="5"
    :page-size="20"
    active-mode="fill"
  />
</template>

<script>
export default {
  data() {
    return {
      fill: 1
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 对齐方式

可通过 align 设置对齐方式

left/center/right

<template>
  <pi-pagination
    v-model="fillAlign"
    :total="300"
    :limit="5"
    :page-size="20"
    active-mode="fill"
    align="right"
  />
</template>

<script>
export default {
  data() {
    return {
      fillAlign: 1
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# item插槽

通过插槽自定义页码样式

<template>
  <pi-pagination v-model="itemSlot" :total="300" :page-size="20">
    <template slot="item" slot-scope="{ item, active }">
      <view class="pi-fz-32" :class="active ? 'pi-fz-40 pi-fz-500 pi-solid-bottom-6' : ''">
        {{ item }}
      </view>
    </template>
  </pi-pagination>
</template>

<script>
export default {
  data() {
    return {
      itemSlot: 3
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 上一页、下一页插槽

<template>
  <pi-pagination
    v-model="prevSlot"
    :total="300"
    :limit="5"
    :page-size="20"
    active-mode="fill"
    align="left"
  >
    <pi-icon slot="prev" name="back" size="32" />
    <pi-icon slot="next" name="right" size="32" />
  </pi-pagination>
</template>

<script>
export default {
  data() {
    return {
      prevSlot: 8
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 属性说明

Name Description Type Required Default
customStyle 自定义样式 Object false -
customClass 自定义样式类 String false -
v-model/value 当前处于第几页 Number false 0
total 总共多少条数据 Number false 0
limit 只显示多少个页码,多余的自动折叠成省略号 Number false 7
pageSize 每页大小 用于计算共多少页 Number false 10
activeMode 填充模式 String false text
align 对齐方式 left/center/right false center

# 事件

Event Name Description Parameters
change 当前页码发生改变 最新的页码

# 插槽

Name Description Default Slot Content
item 分页项 当前分页索引
prev 左边翻页按钮 上一页
next 右边翻页按钮 下一页
Last updated: 2021/9/26 下午3:55:32
10:44