今天项目有个上拉加载的需求,ui框架用的是antd-mobile,
然而框架提供的上拉加载,看不懂,
很想搬砖,
但是怕在这块耗得时间过长,所以就自己造了个上拉加载轮子
需要的可以参考下
import React, { Component } from 'react';
import './myFeedBack.less';
import Header from '@/components/header/Header';
export default class Demo extends Component {
constructor(props) {
super(props);
this.state = ({
feedBackList: [],
current: 1,
pageSize: 10,
pages: 0,
isLoadingMore: false
});
}
componentWillMount() {
this.getList()
}
render() {
return (
<div className={this.state.isLoadingMore ? "container haveBg" : "pageContxt haveBg"}>
<Header history={this.props.history} backIcon title="我的反馈" />
<div className='myFeedBackPage'>
<ul className="feedBackList">
{
this.state.feedBackList.map((item,index) => {
return (
<li className='feedBackItem' key={index}>
<div className="feedBackAsk">
<img src={require("img/myFeedBack/ask.png")} alt="" />
<p>{item.opinion}</p>
<span>{item.createTime}</span>
</div>
<div className="feedBackAnswer">
<img src={require("img/myFeedBack/answer.png")} alt="" />
<p>{item.feedback}</p>
<span>{item.confirmTime}</span>
</div>
</li>
)
})
}
</ul>
<div className="loadMore" ref="wrapper" onClick={this.loadMoreDataFn.bind(this, this)}>
{
this.state.isLoadingMore ? '暂无数据' : <p><img src={require("img/myFeedBack/loading.gif")} alt="" /></p>
}
</div>
</div>
</div>
);
}
getList = () => {
const url = '接口'
window.util.post(url,{
current: this.state.current,
pageSize: this.state.pageSize,
userId: localStorage.getItem('userId')
}).then((res) => {
console.log(res);
this.setState({
pages: res.page.pages
})
if (res.data.list.length === 0) {
this.setState({
isLoadingMore: true
})
}else {
if (res.data.list.length === parseInt(this.state.pageSize, 10)) {
this.setState({
isLoadingMore: false,
feedBackList: this.state.feedBackList.concat(res.data.list)
})
}else {
this.setState({
isLoadingMore: true
})
this.setState({
feedBackList: this.state.feedBackList.concat(res.data.list)
})
}
}
}).catch(e => console.log(e))
}
componentDidMount() {
const wrapper = this.refs.wrapper;
const loadMoreDataFn = this.loadMoreDataFn;
const that = this; // 为解决不同context的问题
let timeCount;
function callback() {
const top = wrapper.getBoundingClientRect().top;
const windowHeight = window.screen.height;
if (top && top < windowHeight) {
// 已经被滚动到页面可视范围之内触发
loadMoreDataFn(that)
}
}
window.addEventListener('scroll', function () {
if (this.state.isLoadingMore) {
return ;
}
if (timeCount) {
clearTimeout(timeCount);
}
timeCount = setTimeout(callback, 50);
}.bind(this), false);
}
loadMoreDataFn(that){
const url = '接口'
let currentTemp = ++that.state.current
window.util.post(url,{
current: currentTemp,
pageSize: that.state.pageSize,
userId: localStorage.getItem('userId')
}).then((res) => {
if(currentTemp < that.state.pages+1 ) {
that.setState({
feedBackList: that.state.feedBackList.concat(res.data.list)
})
}
if(currentTemp > that.state.pages) {
that.setState({
isLoadingMore: true
})
}
})
}
}