109 lines
2.4 KiB
JavaScript
109 lines
2.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Icon } from 'antd';
|
|
import _ from 'lodash';
|
|
import Nodata from '../Nodata';
|
|
|
|
|
|
class PullRefresh extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
}
|
|
this.pullRef = {};
|
|
// 节流
|
|
this.onScrollList = _.throttle(this.handleScroll, 200, {
|
|
leading: false,
|
|
trailing: true,
|
|
});
|
|
}
|
|
|
|
componentDidMount() {
|
|
let dom = document.querySelector('.pull-refresh-wrap');
|
|
dom && dom.addEventListener('scroll', this.onScrollList);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
let dom = document.querySelector('.pull-refresh-wrap');
|
|
dom && dom.removeEventListener('scroll', this.onScrollList)
|
|
}
|
|
|
|
|
|
handleScroll = () => {
|
|
if (this.props.count < this.props.pageSize) return;
|
|
if (this.props.type === 1 || this.props.type === 2) return;
|
|
const wrap = this.pullRef;
|
|
const currentScroll = wrap.scrollTop + wrap.clientHeight
|
|
|
|
// 触底
|
|
if (currentScroll >= (wrap.scrollHeight - 200)) {
|
|
this.loadData()
|
|
}
|
|
}
|
|
|
|
|
|
handleLoadClick = () => {
|
|
this.loadData();
|
|
}
|
|
|
|
loadData = () => {
|
|
this.props.onPullRefresh()
|
|
}
|
|
|
|
|
|
renderLoading() {
|
|
switch (this.props.type) {
|
|
case 0: // 加载更多
|
|
return <div className='text-center' onClick={this.handleLoadClick}>显示更多</div>
|
|
case 1: // 加载中
|
|
return (
|
|
<div className='text-center'>
|
|
<Icon type="loading" />
|
|
<span className='text-center'>加载中...</span>
|
|
</div>
|
|
)
|
|
case 2: // 无样式
|
|
return <div className='text-center'>没有更多了</div>
|
|
default:
|
|
return <div className='text-center'>没有更多了</div>
|
|
}
|
|
}
|
|
|
|
|
|
render() {
|
|
const { className, count, children } = this.props;
|
|
return (
|
|
<div
|
|
className={`pull-refresh-wrap ${className}`}
|
|
ref={dom => { this.pullRef = dom }}
|
|
>
|
|
|
|
{children}
|
|
|
|
{
|
|
count < 1 && <Nodata _html="暂无未读消息" small/>
|
|
}
|
|
|
|
{/* 大于分页数据才显示loading */}
|
|
{/* {this.props.count >= this.props.pageSize ? this.renderLoading() : null} */}
|
|
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
|
|
PullRefresh.propTypes = {
|
|
className: PropTypes.string,
|
|
children: PropTypes.any,
|
|
onPullRefresh: PropTypes.func.isRequired,
|
|
type: PropTypes.oneOf([0, 1, 2]),
|
|
count: PropTypes.number.isRequired,
|
|
pageSize: PropTypes.number.isRequired,
|
|
}
|
|
|
|
|
|
export default PullRefresh
|