超能刚哥

一个移动端适用的React下拉/上推组件

发表于2016-10-17

在两个项目的间歇期抽空写了这么一个东西,感觉在移动端还是有不少应用场景的,尤其是在列表类型的页面,可以很方便地实现下拉刷新和上推加载更多,而且不和系统原生的滚动条冲突,同时可以配置的参数也不少,比如:下拉上推的阈值、灵敏度、顶部底部的提示文字,操作完成或取消的回调等。

项目地址:https://github.com/margox/react-pulldown-mobile

示例

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 上推过程中指定的回调函数,可以从参数获取到位移、阈值、灵敏度
该文章暂无评论,赶快抢占沙发!

发表评论

电子邮件地址不会被公开。 必填项已用*标注