0.1.3 • Published 4 years ago
react-handle-scroll v0.1.3
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 | 样式 | 否 | 无 |