tingle-scroller
The Scroller Component
for tinglejs.
TL;DR
Scroller 是对 iScroll 的 React 封装,用作滑动容器。内部 iScroll 的版本是 5.1.3。
Install
npm install tingle-scroller --save
Simple Usage
{ return <Scroller> <GroupList title="列表标题1"> <div className="tLH44 tPL10">aa</div> <div className="tLH44 tPL10">aa</div> <div className="tLH44 tPL10">aa</div> <div className="tLH44 tPL10">aa</div> <div className="tLH44 tPL10">aa</div> <div className="tLH44 tPL10">aa</div> <div className="tLH44 tPL10">aa</div> <div className="tLH44 tPL10">aa</div> </GroupList> </Scroller> ;}
Options 可用配置
配置项 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|
className | optional | - | 自定义样式类 |
autoRefresh | optional | true | 是否在内容变化时自动重新计算和渲染 |
minWidth | optional | 100% | 容器的最小宽度(为了避免容器宽度过小而显示不正常) |
- 不在列表中的其余参数全部传透给 iScroll,作为 iScroll 的初始化配置项。
<Scroller ref="sc" click=true mouseWheel=false></Scroller>
更多配置详见官网。
- 以 on 开头的参数全部作为事件挂载到 iScroll 实例上。
<Scroller ref="sc" onScrollEnd=thandleScrollEnd></Scroller>
相当于
trefsscscroller;
更多事件详见官网。
API 接口
可通过 ref 到的 component 实例的 .scroller
来获取 iScroll 实例,进而调用实例中的所有方法以及获取实例中的各种属性。
trefsscscroller;