分页 KLPager
基本形式
跳至多少页,支持输入后,按回车键触发哦!
<kl-pager current={current} sumTotal={sumTotal} pageSize={pageSize} />
var component = new NEKUI.Component({template: template,config: function(data) {data.current = 3;data.pageSize = 10;data.sumTotal = 200;}});
不展示pageSize下拉或者总条数
只要不设置pageSize或sumTotal即可,但是需要单独传入每页的条数total
, total
的值是Math.ceil(sumTotal/pageSize)
<pager total={Math.ceil(sumTotal/pageSize)} current={current}></pager>
var component = new NEKUI.Component({template: template,config: function(data) {data.current = 3;data.pageSize = 10;data.sumTotal = 100;}});
总条数展示场景一
如果总条数有200多条,后端只返回200,通过设置isEllipsis
使总条数展示位200+
<kl-pager current={3} sumTotal={200} pageSize={5} isEllipsis={true} />
总条数展示场景二
总条数特别多的时候,可以设置一个最大值x,超过这个值的时候页面展示位x+
<kl-pager current={3} sumTotal={2000000} pageSize={20} maxTotal={2000} />
翻页器展示形式(一般不需要设置)
可以设置翻页器展示的形式,设置两端显示的按钮数以及中间展示的按钮数量
<kl-pager pageSize={5} current={6} sumTotal={100} middle={3} side={1} />
实际业务中推荐做法
通过watch pageSize
和 current
的值来请求列表数据,不推荐使用pager的select事件来处理;
<kl-pager current={current} sumTotal={sumTotal} pageSize={pageSize} />
var component = new NEKUI.Component({template: template,watchedAttr: ['current', 'pageSize'],config: function(data) {data.current = 3;data.pageSize = 10;data.sumTotal = 200;this.$watch(this.watchedAttr, function() {this.__getList();});},__getList: function() {console.log('更新列表数据');}});
API
KLPager
KLPager
Param | Type | Default | Description |
---|---|---|---|
[options.data] | object | = 绑定属性 | |
[options.data.current] | number | 1 | <=> 当前页 |
[options.data.total] | number | 0 | => 总页数 |
[options.data.sumTotal] | number | 0 | => 总个数 |
[options.data.pageSize] | number | 20 | => 每页个数 |
[options.data.middle] | number | 5 | => 当页数较多时,中间显示的页数 |
[options.data.side] | number | 2 | => 当页数较多时,两端显示的页数 |
[options.data.step] | number | 5 | => 每页条数选择步长 |
[options.data.maxPageSize] | number | 50 | => 最大可设置的每页条数 |
[options.data.isEllipsis] | boolean | false | => 是否展示位总条数+ |
[options.data.maxTotal] | number | => 总条数超过maxTotal条数时,展示为maxTotal+条数 | |
[options.data.class] | string | => 补充class |
select 选择某一页时触发Event
Name | Type | Description |
---|---|---|
sender | object | 事件发送对象 |
current | object | 当前选择页 |