分页组件（有些可能叫做翻页组件）应该是一类比较常见的组件了，适用于数据比较多的情况。比如思否的问答页面：
结构比较简单，通常包括上一页、数字页面、下一页等功能，有些可能还会包含输入指定页码跳转、切换每页条数功能。
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，谢谢~
对了，接下来的计划是准备做一个日期选择器（用了那么多好像还从来没手写一个），貌似有些复杂，估计会花费稍久一点的时间，请耐心等待~
