ホームページ > 記事 > ウェブフロントエンド > 単純なページング コンポーネント (反応) によって実装されたページング効果 (コード)
この記事の内容は、単純なページングコンポーネント (react) によって実装されたページング効果 (コード) に関するものです。必要な方は参考にしていただければ幸いです。
シンプルなページングコンポーネント
...仕事の都合で、私は vue の一部を書き、今は学習した反応を統合するために jquery を使い始めています。実際、私はそれを実装するために特別に反応しました。 github L6zt
コードの効果は以下のとおりです:
アイデア:
コンポーネントの基本属性:
cur 現在のページ番号、
すべての合計ページ番号
スペース ページの表示番号 + 1 は、総数
コンポーネントの全体的なステータス
1. cur
2. cur > スペースspace
3. 最後に Connected を付けて、cur > all - space
サブコンポーネントの Pagination は props を通じて状態を更新します。状態とは関係ありません。 コードを表示
// 判断 是不是数字 const isNumber = (num) => { return typeof num === 'number'; } class Pagination extends React.Component { constructor (props) { super(props); } // 点击回调事件 handleClick (item) { // 父组件回调事件 this.props.cb(item); } render () { let {cur, space, all} = this.props; let pgObj = []; // 给不同的元素 赋值class const checkClass = (role, active) => { const defaultClass = 'pg-span'; if (active) { return `${defaultClass} active` } switch (role) { case 0: { return `${defaultClass}` } case 1: { return `${defaultClass}` } default: { } } } // 初始检查 if (all < space) { all = space } if (cur <= 0) { cur = 0 } if (cur >= all) { cur = all } // 阶段判断 if (cur < space) { if (space === all) { for (let i = 1; i <= space; i++) { pgObj.push({ page: i, role: 0, key: i }) } } else { for (let i = 1; i <= space; i ++) { pgObj.push({ page: i, role: 0, key: i }) } pgObj.push({ page: '...', role: 1, key: 'next' }) pgObj.push({ page: all, role: 0, key: all }) } } else if (cur >= space && cur <= all - space + 1) { let odd = parseInt(space / 2); pgObj.push({ page: 1, role: 0, key: 1 }); pgObj.push({ page: '...', role: 1, key: 'pre' }); for (let i = cur - odd; i <= cur + odd ; i ++) { pgObj.push({ page: i, role: 1, key: i }) } pgObj.push({ page: '...', role: 1, key: 'next' }); pgObj.push({ page: all, role: 1, key: all }) } else { pgObj.push({ page: 1, role: 0, key: 1 }); pgObj.push({ page: '...', role: 1, key: 'pre' }); for (let i = all - space + 1; i <= all; i ++) { pgObj.push({ page: i, role: 0, key: i }) }; } return ( <section> { pgObj.map(item => (<span key={item.key} className={checkClass(item.role, item.page === cur)} onClick={() => {this.handleClick(item)}} > {item.page} </span>)) } </section> ) } } class Root extends React.Component { constructor (props) { super(props); this.state = { cur: 1 }; this.handlePagination = this.handlePagination.bind(this); } handlePagination (item) { const {page} = item; if (isNumber(page)) { this.setState({ cur: page }) } } render() { let {cur} = this.state; console.log(cur); return ( <p> <Pagination cur={cur} all={100} space={8} cb={this.handlePagination} /> </p> ) } }; ReactDOM.render( <Root></Root>, document.getElementById('root') );
自分で作成した単純な JavaScript ページング コンポーネントを共有する_JavaScript スキル
以上が単純なページング コンポーネント (反応) によって実装されたページング効果 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。