一个简单的React下拉/上推组件

一个简单的React下拉/上推组件

import React from 'react' import ReactDOM from 'react-dom' import PullDown from '../src' class PullDownDemo extends React.Component { constructor(props) { super(props); this.state = { items: new Array(20).fill('') } } render() { return ( <div className="container"> <PullDown className="foo" topTip="PULL DOWN TO RELOAD" bottomTip="PUSH UP TO LOAD MORE" onPullDown={() => { this.reload() }} onPushUp={() => { this.loadMore() }} > <div className="contents"> {this.state.items.map((v, i) => { return <div key={i} className="item"><span>{i + 1}</span></div> })} </div> </PullDown> </div> ) } reload() { this.setState({ items: new Array(20).fill('') }) } loadMore() { this.setState({ items: [ ...this.state.items, ...new Array(15).fill('') ] }) } } ReactDOM.render(<PullDownDemo />, document.querySelector('#root'))

该示例已经包含在git项目中，要亲自感受，可以clone此项目，然后在项目目录执行以下命令

npm i && npm run sample && open http://localhost:5998 组件属性