一個還算實用的分頁組件：xy-pagination

分頁組件（有些可能叫做翻頁組件）應該是一類比較常見的組件了，適用於數據比較多的情況。比如思否的問答頁面：

結構比較簡單，通常包括上一頁、數字頁面、下一頁等功能，有些可能還會包含輸入指定頁碼跳轉、切換每頁條數功能。

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

對了，接下來的計劃是準備做一個日期選擇器（用了那麼多好像還從來沒手寫一個），貌似有些複雜，估計會花費稍久一點的時間，請耐心等待~