React-pulldown-mobile
一个简单的React下拉/上推组件
示例
Component { superprops; thisstate = items: 20 } { return <div className="container"> <PullDown className="foo" topTip="PULL DOWN TO RELOAD" bottomTip="PUSH UP TO LOAD MORE" onPullDown= { this } onPushUp= { this } > <div className="contents"> thisstateitems </div> </PullDown> </div> } { this } { this } ReactDOM
该示例已经包含在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 | 上推过程中指定的回调函数,可以从参数获取到位移、阈值、灵敏度 |