実用的なページングコンポーネント:xy-pagination

ページコンポーネント(ページコンポーネントと呼ばれる場合もある)は、データが多い場合に適した一般的なコンポーネントであるはずです.たとえば、「いいえ」の質問ページ:
構造は比較的簡単で、通常は前のページ、デジタルページ、次のページなどの機能が含まれており、指定したページ番号を入力してジャンプしたり、各ページの本数を切り替えたりする機能も含まれている場合があります.
xy-pagination xy-paginationはいxy-uiページ分けの問題を解決するコンポーネントが追加されました.主な属性と方法を簡単に紹介します.オンラインドキュメントを読むことをお勧めします.リアルタイムで対話できます.
1つラベルでいいページ分け機能を作る
使用方法
使い方が簡単

npm

npm i xy-ui

cdn

    import 'https://unpkg.com/xy-ui/components/xy-pagination.js'

または直接githubソースコードをコピーします.

    import './node_modules/xy-ui/components/xy-pagination.js';

キーボードの左右のキーを前のページと後ろのページにサポートします.
使用

ツールバーの
データ総数total、1ページあたりの本数pagesizeページング・コンポーネントの合計データ数と1ページあたりのエントリ数を設定または返します.

合計ページ数: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
簡略モードsimplesimple属性を追加し、現在のページと合計ページ数のみを表示できます.

≪イベント｜Events｜ldap≫
onchange
ページ番号の変更のコールバックは、3つのバインド方式をサポートします.

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);
})

≪インスタンス｜Instance｜emdw≫
実際には、冒頭で述べたジャンプ機能など、より複雑なシーンがあるかもしれませんが、xy-selectとxy-inputを組み合わせて実現できます.

    
    
          10 
          15 
          20 
    
       

効果は冒頭に示すように、codepen demoをプレビューできます.
セクションxy-pagination使い勝手が簡単で、2、3つの属性だけで、1つのコールバック方法で、必要な仲間がすぐに使えるようにしたいし、githubに行って粒をあげたいstarありがとう~
ところで、次の計画は日付セレクタを作るつもりです(そんなにたくさん使ってもまだ手書きをしていないようです)、少し複雑なようですが、少し時間がかかると思いますので、辛抱強く待ってください~