# 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
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
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
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
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
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 | 右边翻页按钮 | 下一页 |