mrcio-ui
Version:
159 lines (146 loc) • 8.22 kB
Plain Text
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;