app.jsx 在didmounted请求初始的数据，就是第一页的数据
requestData({
service: 'miles_service',
funid: 29,
postData: {
periods: utils.getUrlParam('periods')
},
callback: (data) => {
let rankPage, wakePage;
if (data.ranking_list.length < data.page_size) { //判断是否只有一页...
rankPage = false;
storeStatics.List.isLoadRank = true;
} else {
rankPage = true;
}
if (data.stay_list.length < data.page_size) { //判断是否只有一页
wakePage = false;
storeStatics.List.isLoadWake = true;
} else {
wakePage = true;
}
this.setState({
data:data,
ranking_list:data.ranking_list,
stay_list: data.stay_list,
rankPage: rankPage,
wakePage: wakePage
});
console.log("data",data);
},
ignoreError:true,
failCallback: (data) => {
storeActions.toast.dispatch(data.result.msg);
},
onError: (e) => {
storeActions.toast.dispatch('出错啦，请重试',e);
}
});
}
app.jsx 加载更多时请求的方法 在其子组件（滚动内容区域）会调用该方法，因此要把该方法作为参数传给子组件
loadMore(list_type, page_num) { //分页请求
requestData({
service: 'miles_service',
funid: 33,
postData: {
query_type: 2,
apprentice_type: list_type,
page_num: page_num,
periods: utils.getUrlParam('periods')
},
callback: (data) => {
//console.log(data);
if (data.resp_status === 1) {
// let datashow = data.data_show.reverse(); //reverse()
if (list_type === 1) {
if (data.ranking_list.length > 0) {
this.setState({
ranking_list: this.state.ranking_list.concat(data.ranking_list),
isHasMoreRank: true
})
storeStatics.List.isLoadRank = false; //在子组件内部绑定了自己的实例，数据请求完毕后，如果不是最后一页，该值归置为false
} else {
this.setState({
isHasMoreRank: false
})
storeStatics.List.isLoadRank = true; //最后一页，该值归置为true
}
} else {
if (data.stay_list.length > 0) {
this.setState({
stay_list: this.state.stay_list.concat(data.stay_list),
isHasMoreWake: true
})
storeStatics.List.isLoadWake = false; //数据请求完毕
} else {
this.setState({
isHasMoreWake: false
})
storeStatics.List.isLoadWake = true;
}
}
} else {
storeActions.toast.dispatch(data.resp_msg);
}
},
ignoreError: true,
failCallback: (data) => {
//console.log(data);
storeActions.toast.dispatch(data.result.msg);
},
onError: (e) => {
storeActions.toast.dispatch(e);
}
});
}
container.jsx 就是滚动区域的组件
constructor(props) {
super(props);
this.state={
islist : true,
islogin : false
}
storeStatics.List = this; //把当前实例保存在storeStatics，其他实例可以直接通过storeStatics.List调用
this.stay_page_num = 1; //初始页数
this.rank_page_num = 1,
this.isLoadRank = false; //下拉刷新时，判断能否达到请求数据的条件
this.isLoadWake = false;
}
componentDidMount() {
const that = this;
console.log(this.refs);
const tribute = this.refs.tribute;
tribute.addEventListener('scroll', function () {
//alert(tribute.scrollTop + ',' + tribute.scrollHeight + ',' + tribute.innerHeight)
if (tribute.scrollTop >= tribute.scrollHeight - tribute.offsetHeight) { //到达临界值
//alert('qq');
//alert(that.isLoadRank);
if (that.state.islist) {
if (!that.isLoadRank) {
that.isLoadRank = true; //请求时把该值改为true 如果数据还没回来则再次到达临界值不会请求服务器
that.rank_page_num = that.rank_page_num + 1;
that.props.load(1, that.rank_page_num) //调用父组件传的方法，请求数据
}
} else {
if (!that.isLoadWake) {
that.isLoadWake = true;
that.stay_page_num = that.stay_page_num + 1;
that.props.load(2, that.stay_page_num)
}
}
}
})
}