# bz-pagination 分页器
# 基本用法
分页器，当数据量过多时，使用分页分解数据。
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-content">
<view class="demo-title">bz-pagination 分页器</view>
<demo-cell>
<bz-pagination
:total="60"
:pageSize="8"
/>
</demo-cell>
<demo-cell :title="`不显示页码 - ${currentText}`">
<bz-pagination
:total="60"
:pageSize="8"
:isPage="false"
@change="changePage"
/>
</demo-cell>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentText: ''
}
},
methods: {
changePage(details) {
const { type, current } = details
this.currentText = `${type == 'next' ? '前进' : '后退'}至第${current}页`
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| current(v-model) | String | 1 | 当前页码 1.0.1 支持 v-model |
| color | String | #1890ff | 主题颜色 |
| total | Number | - | 数据总量 |
| pageSize | Number | 10 | 每页数据量 |
| fontSize | String | 14px | 页码字体大小 |
| pageColor | String | - | 页码字体颜色 |
| disabled | Boolean | false | 是否禁用 |
| Boolean | true | 是否展示页码 (已更改下面字段名) | |
showPage 1.0.1 | Boolean | true | 是否展示页码 |
pagerCount 1.0.1 | Number（大于等于 5 且小于等于 21 的奇数） | 7 | 最大展示的页的数量，超出隐藏 |
| @change | ({ type, current }) => void | - | 页码改变时触发事件，回调类型和页面 |
@changePage 1.0.1 | (current) => void | - | 页码改变时触发事件，直接回调页码 |