import React from 'react'
import {article} from '../../api'
import './index.scss'
import debounce from 'lodash/debounce';
export default class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
result: [],
dropItemPage: 1
};
this.handleDropArticle = debounce(this.handleDropArticle, 500, {leading: true, trailing: false});
}
componentDidMount() {
this.getDropArticle(this.state.dropItemPage)
window.addEventListener('scroll', this.handleScroll)
}
getDropArticle(page) {
article.category_article({
page: page
}).then(res => {
if(res.data.length ==0){
alert('没有数据');
window.removeEventListener('scroll', this.handleScroll)
return false
}
this.setState({
result: this.state.result.concat(res.data)
})
})
}
handleDropArticle() {
return this.getDropArticle(++this.state.dropItemPage)
}
handleScroll = () => {
let isScrollBottom = (parseInt(this.getScrollTop()) + parseInt(this.getClientHeight())) - parseInt(this.getScrollHeight())
if (isScrollBottom === 0 || isScrollBottom === 1) {
this.handleDropArticle()
}
}
getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
render() {
return (
<div className='Index__container'>
<div className="dorp__column">
{this.state.result.map((item, index) => (
<div key={index} className="column__item">
{item.title}
</div>
))}
</div>
</div>
);
}
}
