1.安装
npm install mrcio-ui --save

2.引用
import {ScrollBox} from 'mrcio-ui'

3.scroll API 属性
属性名（name）	类型（type）	必要性（Required）	默认值（default）	描述（description）
initScroll      fun         true                                    initScroll = () =>{this.setState({shouldUpdate:false})};
                                                                    必须加上，防止内存溢出，如：initScroll={this.initScroll}
shouldUpdate    Boolean     true                                    true 重先渲染滚动条 fasle  不渲染。如： shouldUpdate={this.state.shouldUpdate}，初始化必须传true
requestFlag     Boolean     false                                   是否需要滚动加载数据  true 调用requestDataBack。如：requestFlag={this.state.requestFlag}
requestDataBack fun         false                                   滚动分页的方法，如：requestDataBack={this.requestDataBack}
scrollWrapColor string      false                                   滚动条背景色  默认白 如：scrollWrapColor="red"
scrollBarColor  string      false                                   滚动条颜色  默认灰 如：scrollWrapColor="blue"
botFixed        Boolean                                             待定
rigFixed        Boolean                                             待定
width           string      false                                   滚动条的宽度
maxHeight       string      false                                   滚动条的最大高度

4. 使用方式

import React, {Component} from 'react';
import {ScrollBox} from 'mrcio-ui'

class TestScroll extends Component {
    ////普通滚动分页的方法
    // constructor(props) {
    //     super(props);
    //     this.state = {
    //         shouldUpdate: true,//初始化为true
    //         a: ['a', 'a', 'a', 'a', 'a', 'a'],
    //     }
    // };
    //
    // initScroll = () => {
    //     this.setState({shouldUpdate: false});
    // };
    //
    // handleClick() {
    //     let a = this.state.a;
    //     this.setState({
    //         a: a.concat('a'),
    //         shouldUpdate: true,//假如修改了滚动条里面的内容高度，必须把次设置为true，方可重新渲染滚动条
    //     })
    // }
    //
    // render() {
    //     return (
    //         <div>
    //             <div style={{border: "#ccc solid 0.08rem", width: "20rem", maxHeight: "20rem"}}>
    //                 <ScrollBox shouldUpdate={this.state.shouldUpdate}
    //                            initScroll={this.initScroll}//
    //                            width="20rem"
    //                            maxHeight="20rem"
    //                            scrollWrapColor="red"
    //                            scrollBarColor="green"
    //                     //botFixed={false}
    //                     //rigFixed={false}
    //
    //
    //                 >
    //                     <div className="list" style={{width: "100rem"}}>
    //                         {this.state.a.map((value, index) => (
    //                             <div key={index}>
    //                                 <img
    //                                     src="http://shp.qpic.cn/bizmp/gJFE9WWmloXupticj3hiaqVYAfeIcePQtqp5fuOa4d1ibaMa4pAgaWvnQ/64"/>
    //                                 <span>
    //                     <label>Fuyan Gu - {index + 1}</label>
    //                     <p>IT管理团队</p>
    //                     </span>
    //                             </div>
    //                         ))}
    //                         {/*asf;阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律阿斯顿和法律*/}
    //                     </div>
    //                 </ScrollBox>
    //             </div>
    //             <br/> <br/>
    //             <button onClick={this.handleClick.bind(this)}>增加内容，更换滚动条高度</button>
    //         </div>
    //     )
    // };

    //这是滚动分页的用法
    constructor(props) {
        super(props);
        this.state = {
            shouldUpdate: true,//初始化为true
            a: ['a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a'],
            requestFlag: true,
        }
    };

    initScroll = () => {
        this.setState({shouldUpdate: false});
    };

    requestDataBack() {
        this.setState({
            requestFlag: false,
            shouldUpdate: false,
        });
        let _this = this;
        //请求分页服务回来   pn   ps   场景定
        setTimeout(function () {
            let res = ['a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a'];
            _this.setState({
                requestFlag: true,
                shouldUpdate: true,
                a: _this.state.a.concat(res)
            });
        }, 1000)
    };

    handleClick() {
        let a = this.state.a;
        this.setState({
            a: a.concat('a'),
            shouldUpdate: true,//假如修改了滚动条里面的内容高度，必须把次设置为true，方可重新渲染滚动条
        })
    }

    render() {
        return (
            <div style={{width: "20rem", height: "20rem", border: "#000 solid 0.08rem"}}>
                <ScrollBox shouldUpdate={this.state.shouldUpdate}
                           initScroll={this.initScroll}
                           width="20rem"
                           maxHeight="20rem"
                           scrollWrapColor="red"
                           scrollBarColor="green"
                           botFixed={false}
                           rigFixed={false}
                           requestFlag={this.state.requestFlag}
                           requestDataBack={this.requestDataBack.bind(this)}
                >
                    <div className="list" style={{width: "100rem"}}>
                        {this.state.a.map((value, index) => (
                            <div key={index}>
                                <img
                                    src="http://shp.qpic.cn/bizmp/gJFE9WWmloXupticj3hiaqVYAfeIcePQtqp5fuOa4d1ibaMa4pAgaWvnQ/64"/>
                                <span>
                                        <label>Fuyan Gu - {index + 1}</label>
                                        <p>IT管理团队</p>
                                    </span>
                            </div>
                        ))}
                    </div>
                </ScrollBox>
                <br/> <br/>
                <button onClick={this.handleClick.bind(this)}>增加内容，更换滚动条高度</button>
            </div>
        )
    };

}
export default TestScroll;