Install
npm install --save react-handle-scroll
or
yarn add react-handle-scroll
Usage
import React from 'react';
import LazyLoad from 'react-lazyloadcomponent-image';
import Scroll from 'react-handle-scroll';
...
renderItem() {
return this.state.banner.map((item, index) => <li key={ index }>
<LazyLoad>
<div>
{ index + 1 } <img height={200} data-src={ item } alt=""/>
</div>
</LazyLoad>
</li>);
}
onReachBottom(cb) {
// console.log('加载更多');
this.loadData()
.then(cb);
}
onReachTop(cb) {
// this.loadData()
// .then(cb);
cb();
// console.log('滑道顶部');
}
onScroll({ top, left }) {
// console.log(top, left);
}
render() {
return (
<div className={ 'container' }>
<Scroll onReachTop={ this.onReachTop } onScroll={ this.onScroll } onReachBottom={ this.onReachBottom }
className={ 'scroll-wrap' }
style={ { filter: 'brightness(90%)' } }>
<ul>
{ this.renderItem() }
</ul>
</Scroll>
</div>
);
}
...
属性 |
说明 |
是否必须 |
参数 |
onReachTop |
滚动到顶部时触发的函数 |
否 |
callback 函数,如果传入 onReachTop 属性时,则必须在适当时机调用 callback 函数来表明操作结束可以继续滚动 |
onReachBottom |
滚动到底部时触发的函数 |
否 |
与 onReachTop 相似 |
onScroll |
滚动时触发的函数 |
否 |
{top, left}滚动的距离顶部和左侧的位置 |
className |
类名;如果传入必须是 string 类型 |
否 |
无 |
id |
id |
否 |
无 |
style |
样式 |
否 |
无 |