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 (
      <div className="AbnormalDemo">
         <Abnormal status={true} AlnormalData={nodataInit} />
      </div>
    );
  }

}

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 (
      <div className="AnimationDemo">
         <div><Loader size={60} /></div>
         <div><LoaderTwo size={60} /></div>
         <div><LoaderThree size={10} /></div>
      </div>
    );
  }

  componentDidMount(){
    
  }
  
}

export default AnimationDemo;

###  三、链接模态框

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

class AnimationDemo extends Component {

  constructor(props){
    super(props);
  }

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

export default AnimationDemo;

###  四、加载模块

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

class LoadDemo extends Component {

  constructor(props){
    super(props);
  }

  render() {
    return (
      <div className="LoadDemo">
         <Load status={true} />
      </div>
    );
  }
  
}

export default LoadDemo;

###  五、确认模态框

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

class ModalDemo extends Component {

  constructor(props){
    super(props);
  }

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

export default ModalDemo;

###  六、提示框

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

class TextTipDemo extends Component {

  constructor(props){
    super(props);
  }

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

  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 (
      <div className="selectDemo">
        <Select status={timeStatus} data={this.state.select} successBack={(response)=>this.setState({selectValue:response})} cancelBack={()=>this.controlTime()} />
        <button onClick={()=>this.controlTime()}>{(!selectValue || selectValue=="")?"选择器":selectValue}</button>
        <span>{}</span>
      </div>
    );
  }

  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 (
      <div className="RefreshDemo">
        <Refresh refreshBack={()=>this.refreshBack()} loadBack={()=>this.loadBack()} loadStatus={loadStatus} refreshStatus={refreshStatus}>
          <div className="refresh-li">
            { refreshData && refreshData.length>0 &&
              refreshData.map((item,index)=>{
                return <li key={index}>{item.name}</li> 
              })
            }
          </div>
        </Refresh>
      </div>
    );
  }

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

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

一次学习，随处编写
</div>
              <div className="tab-content">无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。

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

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 (
      <div className="ZoomDemo">
        <div><Zoom url={Default} zoomClass="zoomDemoImg" /></div>
      </div>
    );
  }
  
}

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 (
      <div className="WheelPlantDemo">
         <WheelPlant imgArray={imgArray} time={3000} />
      </div>
    );
  }
  
}

export default WheelPlantDemo;

###  十二、待定

###  十三、待定

###  十四、待定