react-uif

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 也可以用作开发原生应用的框架 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;

十二、待定

十三、待定

十四、待定