一个还算实用的分页组件：xy-pagination

分页组件（有些可能叫做翻页组件）应该是一类比较常见的组件了，适用于数据比较多的情况。比如思否的问答页面：

结构比较简单，通常包括上一页、数字页面、下一页等功能，有些可能还会包含输入指定页码跳转、切换每页条数功能。

xy-pagination

xy-pagination是xy-ui新增了一类组件，主要解决分页问题，下面简单介绍一下主要属性和方法，建议阅读在线文档，可以实时交互。

一个标签就做出一个还算不错的分页功能

使用方式

使用方式很简单

• npm

npm i xy-ui

• cdn

• 或者直接从github拷贝源码。

支持键盘左右键向前一页和向后一页。

使用

属性

数据总数total、每页条数pagesize

设置或返回分页组件的数据总数和每页条数。

总页数为：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页），则完整显示

默认值defaultcurrent

可以给分页指定一个初始值defaultcurrent，默认为1。

JavaScript操作get、set

pagination.current; //获取
pagination.current = 2;
//原生属性操作
pagination.getAttribute('current');
pagination.setAttribute('current',2);

如果设置的值超过最大页数，会取最大页数，比如上述最大页数是 17，设置 pagination.current=100，则实际会设置为 17

简约模式simple

可以添加simple属性，只展示当前页和总页数。

事件

onchange

页码改变的回调，支持一下三种绑定方式。

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实现。

    
    
        每页10条
        每页15条
        每页20条
    
    跳转页

效果如文章开头所示，可预览codepen demo

小节

xy-pagination使用很简单，就两三个属性，一个回调方法，希望有需要的小伙伴可以马上用起来，也希望可前往github给颗star，谢谢~

对了，接下来的计划是准备做一个日期选择器（用了那么多好像还从来没手写一个），貌似有些复杂，估计会花费稍久一点的时间，请耐心等待~