react-uif是一款基于react的第三方组件库，其中有上拉加载，图片拉大，选择器等组件。demo展示：http://www.reactdemo.top/

##1、下载组件库

npm install react-uif

##2、引用组件

import {Abnormal ,Loader ,LoaderTwo ,LoaderThree ,Link ,Load ,Modal ,Refresh ,Select ,Tab ,TextTip ,WheelPlant ,Zoom} from 'react-uif';

##3、使用组件

一、暂无数据

import React, { Component } from 'react'; import {Abnormal} from 'react-uif'; import nodataInit from '../image/nodata-init.png';

class AbnormalDemo extends Component {

constructor(props){ super(props); }

render() { return ( ); }

}

export default AbnormalDemo;

二、css3动画

import React, { Component } from 'react'; import {Loader} from 'react-uif'; import {LoaderTwo} from 'react-uif'; import {LoaderThree} from 'react-uif';

class AnimationDemo extends Component {

constructor(props){ super(props); }

render() { return ( ); }

componentDidMount(){

}

}

export default AnimationDemo;

三、链接模态框

import React, { Component } from 'react'; import {Link} from 'react-uif';

class AnimationDemo extends Component {

constructor(props){ super(props); }

render() { return ( <Link modalStatus={true} errorCallBack={()=>alert('取消时的回调')} successCallBack={()=>alert('确认后的回调')} /> ); }

}

export default AnimationDemo;

四、加载模块

import React, { Component } from 'react'; import {Load} from 'react-uif';

class LoadDemo extends Component {

constructor(props){ super(props); }

render() { return ( ); }

}

export default LoadDemo;

五、确认模态框

import React, { Component } from 'react'; import {Modal} from 'react-uif';

class ModalDemo extends Component {

constructor(props){ super(props); }

render() { return ( <Modal modalStatus={true} errorCallBack={()=>alert("失败后的回调")} successCallBack={()=>alert("确认后的回调")} /> ); }

}

export default ModalDemo;

六、提示框

import React, { Component } from 'react'; import {TextTip} from 'react-uif';;

class TextTipDemo extends Component {

constructor(props){ super(props); }

render() { return ( <button onClick={()=>this.refs.textModal.changeAnition("请填写链接名字")}>确认提示框 ); }

componentDidMount(){

}

}

export default TextTipDemo;

七、选择器

import React, { Component } from 'react'; import {Select} from 'react-uif';

class SelectDemo extends Component {

constructor(props){ super(props); this.state={ timeStatus:true, selectValue:"", select:[ [{name:"长沙"},{name:"岳阳"},{name:"衡阳"},{name:"益阳",flag:true},{name:"株洲",flag:true},{name:"常德"}], [{name:"一号"},{name:"二号"},{name:"三号",flag:true},{name:"四号"},{name:"五号"},{name:"六号"},{name:"七号"},{name:"八号"},{name:"九号"}], [{name:"菊花",flag:true},{name:"荷花"},{name:"太阳花"},{name:"栀子花"}], ] } }

render() { let {timeStatus ,selectValue} = this.state; return ( <Select status={timeStatus} data={this.state.select} successBack={(response)=>this.setState({selectValue:response})} cancelBack={()=>this.controlTime()} /> <button onClick={()=>this.controlTime()}>{(!selectValue || selectValue=="")?"选择器":selectValue} {} ); }

componentDidMount(){ document.body.addEventListener('touchmove',function(e){ e.preventDefault(); }) }

controlTime(){ this.setState({ timeStatus:!this.state.timeStatus }) }

}

export default SelectDemo;

八、上拉加载/下载刷新

import React, { Component } from 'react'; import {Refresh} from 'react-uif'; //import Refresh from '../component/Refresh/Index.js'

class RefreshDemo extends Component {

constructor(props){ super(props); this.state={ refreshStatus:false, loadStatus:false, refreshData:[ {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"}, {name:"上拉加载/下拉刷新"} ] } }

render() { let {refreshData ,loadStatus ,refreshStatus} = this.state; return ( <Refresh refreshBack={()=>this.refreshBack()} loadBack={()=>this.loadBack()} loadStatus={loadStatus} refreshStatus={refreshStatus}> { refreshData && refreshData.length>0 && refreshData.map((item,index)=>{ return {item.name} }) } ); }

componentDidMount(){

}

refreshBack(){ setTimeout(()=>{ this.setState({ refreshStatus:false }) },1000) }

loadBack(){ let {refreshData} = this.state; setTimeout(()=>{ for(let i=0;i<5;i++){ refreshData.push({name:"上拉加载/下拉刷新"}) }; this.setState({ loadStatus:false }) },1000) }

}

export default RefreshDemo;

九、选项卡

import React, { Component } from 'react'; import {Tab} from 'react-uif';

class TabDemo extends Component {

constructor(props){ super(props); this.state={ tabData:[

  ]
}

}

render() { return ( <Tab title={["tab1","tab2","tab3","tab4","tab5"]}> React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。 以声明式编写UI，可以让你的代码更加可靠，且方便调试 创建好拥有各自状态的组件，再由组件构成更加复杂的界面。

无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。

一次学习，随处编写

React 也可以用作开发原生应用的框架 React Native. React 组件使用一个名为 render() 的方法， 接收数据作为输入，输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props 传入 render() 方法。 除了使用外部传入的数据以外 (通过 this.props 访问传入数据), 组件还可以拥有其内部的状态数据 (通过 this.state 访问状态数据)。 当组件的状态数据改变时， 组件会调用 render() 方法重新渲染 ); }

}

export default TabDemo;

十、图片缩放

import React, { Component } from 'react'; import Default from '../image/default.jpg'; import {Zoom} from 'react-uif';

class ZoomDemo extends Component {

constructor(props){ super(props); }

render() { return ( ); }

}

export default ZoomDemo;

十一、轮播图

import React, { Component } from 'react'; import img1 from '../image/delete.png'; import img2 from '../image/default.jpg'; import {WheelPlant} from 'react-uif';

class WheelPlantDemo extends Component {

constructor(props){ super(props); this.state={ imgArray:[ {url:img1}, {url:img2} ] } }

render() { let {imgArray} = this.state; return ( ); }

}

export default WheelPlantDemo;

十二、待定

十三、待定

十四、待定