分隔长列表，每次只加载一个页面。
规则
引入方式
数字生活小程序工程中，不需要 import，直接使用组件标签即可。
import {Pagination} from '@21cnfe/vui'
Vue.component('Pagination', Pagination)
|
代码演示
基本用法
total 为页面总数，通过 current 属性设置当前页，onChange 事件为切换回调方法
<template>
<Pagination :total="5" :current="1" @onChange="changePage"></Pagination>
</template>
<script>
export default {
methods: {
changePage (page) {
console.log('当前页：', page)
}
}
}
</script>
|
展示形态
通过 mode 属性设置展示形态，可选值有 button，number，pointer，通过 simple 属性控制页数的展示
<Pagination :total="5" mode="button"></Pagination>
<Pagination :total="5" mode="number"></Pagination>
<Pagination :total="5" mode="pointer"></Pagination>
<Pagination :total="5" simple></Pagination>
|
禁用状态
<Pagination :total="5" disabled></Pagination>
|
自定义按钮文本
通过 locale 属性自定义按钮文本
<template>
<Pagination :total="5" :locale="locale"></Pagination>
</template>
<script>
export default {
data () {
return: {
locale: {
prevText: '上一页',
nextText: '下一页'
}
}
}
}
</script>
|
API
| 属性 |
说明 |
类型 |
默认值 |
mode |
形态，可选button,number,pointer |
String |
button |
current |
当前页号 |
Number |
1 |
locale |
自定义翻页按钮文本 |
Object |
{ prevText: 'Prev', nextText: 'Next' } |
total |
页面总数 |
Number |
-- |
simple |
是否隐藏数值 |
Boolean |
-- |
disabled |
禁用状态 |
Boolean |
-- |
Event
| 事件名称 |
说明 |
回调参数 |
onChange |
change 事件触发的回调函数 |
page：当前所在页数 |
