分页组件(有些可能叫做翻页组件)应该是一类比较常见的组件了,适用于数据比较多的情况。比如思否的问答页面:
结构比较简单,通常包括上一页、数字页面、下一页等功能,有些可能还会包含输入指定页码跳转、切换每页条数功能。
xy-pagination
xy-pagination
是xy-ui
新增了一类组件,主要解决分页问题,下面简单介绍一下主要属性和方法,建议阅读在线文档,可以实时交互。
一个<xy-pagination></xy-pagination>
标签就做出一个还算不错的分页功能
使用方式
使用方式很简单
- npm
npm i xy-ui
- cdn
<script type="module" src="https://unpkg.com/xy-ui/components/xy-pagination.js"></script>
<!--或者-->
<script type="module">
import 'https://unpkg.com/xy-ui/components/xy-pagination.js'
</script>
- 或者直接从
github
拷贝源码。
<script type="module" src='./node_modules/xy-ui/components/xy-pagination.js'></script>
<!--或者-->
<script type="module">
import './node_modules/xy-ui/components/xy-pagination.js';
</script>
支持键盘左右键向前一页和向后一页。
使用
<xy-pagination pagesize="3" total="50"></xy-pagination>
属性
数据总数total
、每页条数pagesize
设置或返回分页组件的数据总数和每页条数。
<xy-pagination pagesize="3" total="50">
总页数为:50/3 向上取整
JavaScript操作get
、set
pagination.pagesize; //获取
pagination.pagesize = 5;
pagination.total;
pagination.total = 100;
//原生属性操作
pagination.getAttribute('pagesize');
pagination.getAttribute('total');
pagination.setAttribute('pagesize',5);
pagination.setAttribute('total',100);
当页数较少时(不超过10
页),则完整显示
<xy-pagination pagesize="3" total="20"></xy-pagination>
默认值defaultcurrent
可以给分页指定一个初始值defaultcurrent
,默认为1
。
<xy-pagination defaultcurrent="7" pagesize="3" total="50"></xy-pagination>
JavaScript操作get
、set
pagination.current; //获取
pagination.current = 2;
//原生属性操作
pagination.getAttribute('current');
pagination.setAttribute('current',2);
如果设置的值超过最大页数,会取最大页数,比如上述最大页数是17
,设置pagination.current=100
,则实际会设置为17
简约模式simple
可以添加simple
属性,只展示当前页和总页数。
<xy-pagination simple pagesize="3" total="50"></xy-pagination>
事件
onchange
页码改变的回调,支持一下三种绑定方式。
<xy-pagination onchange="XyMessage.info('当前页: '+this.current)" pagesize="3" total="50"></xy-pagination>
pagination.onchange = function(ev){
//获取参数的几种方式
/*
event:{
detail:{
current,
pagesize,
total,
}
}
*/
console.log(this.current);
console.log(ev.target.current);
console.log(ev.detail.current);
}
pagination.addEventListener('change',function(ev){
console.log(this.current);
console.log(ev.target.current);
console.log(ev.detail.current);
})
实例
实际过程中可能有更复杂的场景,比如文章开头说的跳转功能,我们可以配合xy-select
和xy-input
实现。
<div class="pagination-demo">
<xy-pagination id="pagination-demo" onchange="XyMessage.info('当前页: '+this.current)" pagesize="10" total="200"></xy-pagination>
<xy-select defalutvalue="10" onchange="document.getElementById('pagination-demo').pagesize=this.value">
<xy-option value="10">每页10条</xy-option>
<xy-option value="15">每页15条</xy-option>
<xy-option value="20">每页20条</xy-option>
</xy-select>
<span>跳转</span><xy-input type="number" defalutvalue="1" min="1" onchange="document.getElementById('pagination-demo').current = this.value"></xy-input><span>页</span>
</div>
效果如文章开头所示,可预览codepen demo
小节
xy-pagination
使用很简单,就两三个属性,一个回调方法,希望有需要的小伙伴可以马上用起来,也希望可前往github给颗star
,谢谢~
对了,接下来的计划是准备做一个日期选择器(用了那么多好像还从来没手写一个),貌似有些复杂,估计会花费稍久一点的时间,请耐心等待~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。