react-pulldown-mobile

React-pulldown-mobile

一个简单的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

组件属性