内容如标题,帖子要6个字才能发
react有什么好的滚动加载插件,求大佬指点
shinyzhang
#3
哈哈 很多的
antd mobile https://antd-mobile.gitee.io/components/list-view-cn/
react-window https://www.npmjs.com/package/react-window
dennis
#4
自己写一个吧,可以给你个参考代码:
import React, {Component} from ‘react’;
import ‘./LoadMore.scss’;
class LoadMore extends Component {
constructor(props) {
super(props);
this.timerId = null;
}
hasScrollbar() {
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}
componentDidMount() {
const {loadMoreFn} = this.props;
//长屏手机一页未撑满时,自动加载第二页
if (!this.hasScrollbar()) {
loadMoreFn();
}
const callback = () => {
const wrapper = this.refs.wrapper;
const top = wrapper && wrapper.getBoundingClientRect().top;
const windowHeight = window.screen.height;
if (top && top < windowHeight) {
wrapper && loadMoreFn();
}
}
//滚动事件
window.addEventListener('scroll', () => {
if (this.props.isLoadingMore) {
return;
}
if (this.timerId) {
clearTimeout(this.timerId);
this.timerId = null;
}
this.timerId = setTimeout(callback, 50);
}, false);
}
componentWillUnmount() {
window.removeEventListener('scroll', null, false);
this.timerId = null;
}
render() {
return (
<div className='loadMore' ref='wrapper'>
{
this.props.isLoadingMore &&
<img src={require('../../../static/img/common/ic/spinner.png')} alt=""/>
}
</div>
)
}
}
export default LoadMore;