找回密码
当前位置：前端开发者 > React > 正文

前端用react写一个分页组件

2018-11-07 21:58:03 分类：React 阅读(139) 评论(0)
商城前端开发规范
淘宝web前端开发规范
前端开发字体规范

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”utf-8″ />
        <title>用react写表单验证</title>
        <script src=”http://cdn.amazeui.org/react/0.14.3/react.min.js”></script>
        <script src=”http://cdn.amazeui.org/react/0.14.3/react-dom.min.js”></script>
        <script src=”http://cdn.bootcss.com/babel-core/5.8.33/browser.min.js”></script>
        <style>
            .fl {
                float: left;
            }
            .fr {
                float: right;
            }
            .ui-pagnation {
                display: block;
                margin-top: 50px;
                color: #535353;
                line-height: 29px;
                text-align: center;
            }
            .ui-pagnation a {
                float: left;
                min-width: 30px;
                height: 30px;
                padding: 0 7px;
                vertical-align: middle;
                text-decoration: none;
                cursor: pointer;
            }
            .ui-pagnation .next,
            .ui-pagnation .prev {
                margin: 0 9px;
                background-color: #f3f4f8;
                border: 1px solid #00a0e9;
            }
            .ui-pagnation .next:before,
            .ui-pagnation .prev:before {
                content: ‘<‘;
                color: #00a0e9;
                font-size: 14px;
            }
            .ui-pagnation .next:hover,
            .ui-pagnation .prev:hover {
                border-color: #50c8ff;
            }
            .ui-pagnation .next:hover:before,
            .ui-pagnation .prev:hover:before {
                color: #50c8ff;
            }
            .ui-pagnation .disable.next,
            .ui-pagnation .prev.disable {
                background-color: #f3f4f8;
                border-color: #a0a0a0;
                cursor: no-drop;
            }
            .ui-pagnation .disable.next:before,
            .ui-pagnation .prev.disable:before {
                color: #a0a0a0;
            }
            .ui-pagnation .next:before {
                content: ‘>’;
            }
            .ui-pagnation .num {
                margin-left: -1px;
                padding: 0 7px;
                border: 1px solid #e5e5e5;
                color: #707070;
            }
            .ui-pagnation .num.current,
            .ui-pagnation .num:hover {
                background-color: #a7bbcb;
                border-color: #a7bbcb;
                color: #fff;
            }
            .ui-pagnation .ellipsis {
                width: 42px;
                height: 30px;
                color: #707070;
                line-height: 30px;
            }
            .ui-pagnation input {
                width: 44px;
                height: 24px;
                border: 1px solid #eee;
                text-align: center;
            }
            .ui-pagnation .page-go {
                min-width: 60px;
                margin-left: 10px;
                margin-right: 10px;
                background-color: #a7bbcb;
                border: 1px solid #879cac;
                color: #fff;
            }
            .ui-pagnation .page-go:hover {
                background-color: #87a2b8;
                border-color: #698397;
            }
        </style>
    </head>
    <body>
        <div id=”demo”></div>
        <script type=”text/babel”>
            var Page = React.createClass({
                getInitialState: function() {
                    return { current: 1, value: ” }
                },
                handClick: function(e) {
                    let sel = this
                    return function() {
                        sel.setState({ current: e })
                    }
                },
                handChange: function(e) {
                    this.setState({ value: e.target.value })
                },
                goNext: function() {
                    let cur = this.state.current
                    if (cur < this.props.total) {
                        this.setState({ current: cur + 1 })
                    }
                },
                goPrev: function() {
                    let cur = this.state.current
                    if (cur > 1) {
                        this.setState({ current: cur – 1 })
                    }
                },
                goPage: function() {
                    var val = this.state.value
                    if (!/^[1-9]\d*$/.test(val)) {
                        alert(‘页码只能输入大于1的正整数’)
                    } else if (parseInt(val) > parseInt(this.props.total)) {
                        alert(‘没有这么多页’)
                    } else {
                        this.setState({ current: val })
                    }
                },
                render: function() {
                    let self = this
                    let total = this.props.total
                    let cur = this.state.current
                    let items = []
                    let begin
                    let len
                    if (total > 5) {
                        len = 5
                        if (cur >= total – 2) {
                            begin = total – 4
                        } else if (cur <= 3) {
                            begin = 1
                        } else {
                            begin = cur – 2
                        }
                    } else {
                        len = total
                        begin = 1
                    }
                    for (let i = 0; i < len; i++) {
                        let cur = this.state.current
                        let showI = begin + i
                        if (cur == showI) {
                            items.push({ num: showI, cur: true })
                        } else {
                            items.push({ num: showI, cur: false })
                        }
                    }
                    return (
                        <div className=”ui-pagnation”>
                            <a
                                className={
                                    this.state.current == 1
                                        ? ‘prev disable’
                                        : ‘prev’
                                }
                                onClick={this.goPrev}
                            />
                            <span className=”pagnation-cols”>
                                {items.map(function(item) {
                                    return (
                                        <a
                                            onClick={self.handClick(item.num)}
                                            className={
                                                item.cur ? ‘num current’ : ‘num’
                                            }
                                        >
                                            {item.num}
                                        </a>
                                    )
                                })}
                            </span>
                            <a
                                className={
                                    this.state.current == this.props.total
                                        ? ‘next disable’
                                        : ‘next’
                                }
                                onClick={this.goNext}
                            />
                            <div className=”fl”>
                                共<span className=”num-total”>{total}</span>
                                页，到第
                                <input
                                    type=”text”
                                    value={self.state.value}
                                    onChange={this.handChange}
                                />
                                页
                            </div>
                            <a onClick={this.goPage} className=”page-go”>
                                确定
                            </a>
                        </div>
                    )
                },
            })
            ReactDOM.render(
                <div>
                    <Page total=”20″ />
                </div>,
                document.getElementById(‘demo’),
            )
        </script>
    </body>
</html>
阿里巴巴前端开发规范
阿里云前端开发规范
前端开发的规范 博客园
» 本文来自：前端开发者 » 《前端用react写一个分页组件》
» 本文链接地址：https://www.rokub.com/6328.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论