tplus-scroller-mobile
v1.0.3
Published
提供滚动, 回弹, 惯性效果的组件.
Downloads
3
Readme
Scroller
Scroller用于提供模拟IOS滑动效果的容器, 支持以下特性:
- 带有滚动条
- 滚动过程中惯性效果
- 滚动到顶部/底部时回弹效果
- 滚动到顶部时下拉 PullRefresh
- 滚动到底部时上拉 LoadMore
Scroller 会根据当前的操作系统及版本自动选择最优的实现方式.
安装
如果你想独立使用 Scroller, 直接安装包并在代码中引用即可
安装
npm install chanjet-scroller
引用
import {Scroller} from "chanjet-scroller"
如果你正在使用 chanjet-ui
库, 那么你可以直接在 chanjet-ui
库中使用
import Scroller from "chanjet-ui/lib/components/Scroller"
简单上手
如果你只是需要一个和IOS滚动效果类似的容器, 那么只需要使用Scroller包装你所需要显示的内容即可.
定义显示范围
由于Scroller是一个容器, 所以需要制定Scroller的宽高来定义内容区域的大小. 有三种方式可以定义大小:
通过外部容器进行控制
Scroller默认宽高均为100%, 所以可以通过外部容器进行大小控制;
通过
displayHeight
,displayWidth
控制 Scroller接收
displayHeight
,displayWidth
属性, 可以通过这两个属性进行控制;通过style控制
Scroller接收style属性, 可以给最外层容器进行样式设置;
注意: style
的优先级高于 displayHeight
, displayWidth
.
//react组件的render方法, 其余代码省略
//使用外部div进行控制
render(){
return (
<div style={{width:200, height:50}} >
<Scroller>
...
</Scroller>
</div>
);
}
...
//使用displayWidth, displayHeight进行控制
render(){
return (
<Scroller displayWidth={200} displayHeight={50}>
...
</Scroller>
);
}
...
//使用style进行控制
render(){
return (
<Scroller style={{width:200, height:50}}>
...
</Scroller>
);
}
顶部下拉刷新
启用
在 props
中通过 refreshHandler
可以设置回调函数并启用下拉刷新功能.
设置触发操作的高度
在 props
中通过 distanceToRefresh
可以设置触发刷新的高度, 默认值: 45
当用户滚动到顶部并且继续下拉超过指定高度( distanceToRefresh
)后, 我们会认为用户想要刷新数据, refreshHandler
会当做刷新事件的响应函数被执行. 我们会传递一个执行完成的回调函数, 当做 refreshHandler
的第一个参数.
当外部数据处理完成或错误后, 执行这个回调来将顶部的loading状态重新设置会初始状态.
import React from 'react';
class DemoPage extends React.Component{
//回调接受第一个参数作为外部过程完成后的回调函数
onRefresh(done){
//这里使用Promise是为了表示,需要在外部业务处理完成后再调用回调的顺序关系
Promise.resolve(() => {
//具体更新数据代码, 省略
...
}).then(() => {
//刷新完数据后, 执行回调函数回复动画的初始状态
done();
});
}
//react组件的render方法
render(){
const onRefresh = (done) => {
refreshData().then(done);
}
return (
<Scroller
//设置触发刷新的高度为60
distanceToRefresh={60}
//设置回调函数为onRefresh
refreshHandler={this.onRefresh.bind(this)}
>
//具体内容省略
...
</Scroller>
);
}
}
底部上拉加载更多
底部上拉加载更多的设置方式和顶部下拉刷新基本一致, 只不过属性值改为 moreHandler
.
distanceToRefresh
设置的高度, 同时影响下拉刷新和上拉加载更多.
import React from 'react';
class DemoPage extends React.Component{
//回调接受第一个参数作为外部过程完成后的回调函数
onLoadMore(done){
//这里使用Promise是为了表示,需要在外部业务处理完成后再调用回调的顺序关系
Promise.resolve(() => {
//具体加载更多数据代码, 省略
...
}).then(() => {
//加载完数据后, 执行回调函数回复动画的初始状态
done();
});
}
//react组件的render方法
render(){
return (
<Scroller
//设置触发刷新的高度为60
distanceToRefresh={60}
//设置回调函数为onLoadMore
moreHandler={this.onLoadMore.bind(this)}
>
//具体内容省略
...
</Scroller>
);
}
}
Props
| 属性 | 类型 | 描述 | 默认值 | | ---------------------- | ---------------- | ---------------------------------------- | ------- | | refreshHandler | function | 触发顶部刷新时调用 | - | | moreHandler | function | 触发底部加载时调用 | - | | scrollHandler | function | 滚动时调用(在IOS环境下, 模拟滚动也会触发这个事件, 所以事件内的处理代码请谨慎使用. 可能会影响渲染性能) | | | refreshColor | string | 顶部刷新的图标的颜色 | | | moreColor | string | 尾部加载的图标的颜色 | | | displayWidth | string or number | 容器显示宽度 | 100% | | displayHeight | string or number | 容器显示高度 | 100% | | distanceToRefresh | number | 触发刷新和加载的高度,单位是像素 | 45 | | rootBackgroundColor | string | 设置最底层背景色 | #F5F5F5 | | contentBackgroundColor | string | 设置内容区域背景颜色 | #FFFFFF |