react移动端滚动组件,支持上拉加载、下拉刷新、返回顶部
npm install react-scroll-mobile
`
或
`
yarn add react-scroll-mobile
`
Usage
`
import Scroll from 'react-scroll-mobile'
const timeout = delay => new Promise(resolve => setTimeout(resolve,delay));
class App extends Component {
state = {
list:[],
noMore: false
}
pageIndex = 1;
componentDidMount(){
//首次加载时，可以主动触发下拉加载动效，更炫酷
this.scrollRef.pullDownRefresh(this.pullDownRefresh)
}
pullDownRefresh = async ()=>{
this.pageIndex = 1;
await this.getData();
};
pullUpLoad = async ()=>{
this.pageIndex ++;
await this.getData();
};
getData = async ()=>{
//模拟请求和数据
await timeout(1000);
let res = [0,1,2,3,4,5,6,7,8,9];
// 模拟没有数据了
if(this.pageIndex > 4 )res = [];
const list = this.pageIndex === 1 ? res : this.state.list.concat(res);
this.setState({
list,
noMore: res.length === 0
})
}
render() {
const { list, noMore } = this.state;
return (
pullDownRefresh={this.pullDownRefresh}
pullUpLoad={this.pullUpLoad}
noMore={noMore}
backTop
>
{
list.map((item,index)=>- 数据数据数据数据{index}
)
}
);
}
}
export default App;
``