乐趣区

一个还算实用的分页组件xypagination

jiezi

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

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

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，谢谢~

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

退出移动版