react-uif v1.2.38

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 className="tab-content">创建好拥有各自状态的组件，再由组件构成更加复杂的界面。

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

一次学习，随处编写

React 也可以用作开发原生应用的框架 React Native.

          <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;

十二、待定

十三、待定

十四、待定