zent
Version:
一套前端设计语言和基于React的实现
39 lines (28 loc) • 2.32 kB
Markdown
title: InfiniteScroller
path: component/infinite-scroller
group: Data Display
## InfiniteScroller
Infinite scrolling widget
### Guides
- Used to load content continuously as the user scrolls down the page.
### API
| Property | Description | Type | Default | Alternative |
| ------------------ | ---------------------------- | ------------------- | ---------------- | -------------------------------------------- |
| hasMore | if pass true, it will call loadMore function | bool | `true` | `false`, `true` |
| loadMore | loadMore function, first argument is a callback to stop loading animation effect| func(stopLoading) | | |
| initialLoad | whether it should be call loadMore function when it initialize | bool | `false` | `false`, `true` |
| useWindow | if pass true, it will listens window scroll event, or it will listens it's DOM element scroll event | bool | `true` | `false`, `true` |
| useCapture | whether to capture event when scroll event triggers | bool | `false` | `false`, `true` |
| loader | showing content when it is loaded | node | zent的Loading | |
| offset | it will loads data when the distance threshold has been reached | number | 20 | |
| className | custom extra classname | string | `''` | |
| prefix | custom class prefix | string | `'zent'` | |
### loadMore
When it is a async loading, it is expected that the return of loadMore function is a Promise that is used to control loading show. or you have to stop loading by yourself with the first param as callback from loadMore function
<style>
.infinite-scroller-demo {
height: 300px;
}
</style>