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

组件属性

属性名	类型	说明
container	String	下拉容器的querySelector选择器字符串，默认是当前父元素
id	String	会作为id属性附加到组件的DOM元素上
className	String	会作为class属性附加到组件的DOM元素上，可用于自定义组件的样式
topTip	String	下拉露出的顶部区域的提示文字
bottomTip	String	上推露出的底部区域的提示文字
threshold	Number	下拉/上推完成阈值，默认是200
sensitivity	Number	下拉/上推灵敏度，请传入0.1-1的数字，默认是0.4
enablePull	Boolean	开启下拉功能，默认true
enablePush	Boolean	开启上推功能，默认true
onPullCancel	Function	取消下拉后执行的回调函数
onPullDown	Function	达到下拉阈值后执行的回调函数
onPullMove	Function	下拉过程中指定的回调函数，可以从参数获取到位移、阈值、灵敏度
onPushCancel	Function	取消上推后执行的回调函数
onPushUp	Function	达到上推阈值后执行的回调函数
onPushMove	Function	上推过程中指定的回调函数，可以从参数获取到位移、阈值、灵敏度