分页器 Pager

示例

基本形式

<pager current=6 total=11 />

位置

<pager current=6 total=11 position="left" />
<pager current=6 total=11 position="center" />
<pager current=6 total=11 position="right" />

显示数目

<pager current=6 total=11 middle=3 side=1 />

禁用组件

<pager current=6 total=11 disabled />

数据绑定

<pager current={current} total=11 />
<p><span>当前页：{current}</span></p>
<a class="u-btn u-btn-info" on-click={current -= 1}>上一页</a>
<a class="u-btn u-btn-info" on-click={current += 1}>下一页</a>

let component = new RGUI.Component({
    template,
    data: {current: 6},
});

事件

请打开浏览器的控制台查看结果。

<pager current=6 total=11
    on-select={console.log('on-select:', '$event.current:', $event.current)}
    on-change={console.log('on-change:', '$event.current:', $event.current)} />

API

Class

Pager

继承自。

Options

new Pager()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.current`	number	`1`	outside <=> inside	当前页
`data.total`	total	`11`	outside => inside	总页数
`data.position`	string	`'center'`	outside => inside	分页的位置，可选参数：`center`、`left`、`right`
`data.middle`	middle	`5`	outside => inside	当页数较多时，中间显示的页数
`data.side`	side	`2`	outside => inside	当页数较多时，两端显示的页数
`data.readonly`	boolean	`false`	outside => inside	是否只读
`data.disabled`	boolean	`false`	outside => inside	是否禁用
`data.visible`	boolean	`true`	outside => inside	是否显示
`data.class`	string	`''`	outside => inside	补充class

Methods

pager.select(page)

选择某一页

参数	类型	默认值	描述
`page`	number		选择页
返回值	类型	描述
无返回值

Events

pager.$on('change')

选择值改变时触发

属性	类型	描述
`sender`	object	事件发送对象
`current`	number	改变后的选择页
`total`	number	总页数

pager.$on('select')

选择某一页时触发

属性	类型	描述
`sender`	object	事件发送对象
`current`	number	当前选择页
`total`	number	总页数