antd-mobile的下拉刷新上拉加载使用

在使用antd-mobile有用到下拉刷新上拉加载

import { NavBar, Icon ,Tabs , ListView , PullToRefresh } from ‘antd-mobile’; // 这是我这个页面要的的组件

贴出我所有的代码，可以直接复制，我的这个是自定义的下来刷新上拉加载

// 新闻列表
import React, { Component } from ‘react’;
import { NavBar, Icon ,Tabs , ListView , PullToRefresh } from ‘antd-mobile’;
import ‘…/…/pageCss/newsList/newsList.css’
import {findGardenInfoAll} from ‘…/…/api/newsList/newsListApi’
class News extends Component {
constructor(props){
super(props)
const dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.state={
tabs:[
{ title: ‘全部’, sub: ‘1’ },
{ title: ‘园区动态’, sub: ‘2’ },
{ title: ‘木业资讯’, sub: ‘3’ }
],
tabsIndex:0,//tab选择的
newsList:[],//数据
dataSource:dataSource, //列表的初始化
refreshing: true, //下拉刷新
isLoading: true, //文字显示
pages:{
pageNum:1,//第几页
pageSize:10,//每页多少
type:0,//列表的类型
}
}
}
query(pages){//数据请求
let _this = this;
findGardenInfoAll(pages).then(res=>{
if(res.pages>=this.state.pages.pageNum){
_this.state.pages.pageNum++;
this.state.newsList = […this.state.newsList,…res.list]
this.setState({
newsList:this.state.newsList,
dataSource: this.state.dataSource.cloneWithRows(this.state.newsList),
isLoading: false,
pages:_this.state.pages,
});
}else {
_this.setState({
isLoading: false
})
}
_this.setState({
refreshing:false
})
})
}
onRefresh = () => { //下拉刷新
this.state.pages.pageNum = 1;
this.setState({ refreshing: true, isLoading: true ,pages:this.state.pages,newsList:[]});
setTimeout(() => {
this.query(this.state.pages)
}, 600);
}
onEndReached = (event) => {//触底加载
if (this.state.isLoading) {
return;
}
this.setState({ isLoading: true });
setTimeout(() => {
this.query(this.state.pages)
}, 600);
}
render() {//我们列表展示的数据样式等
const row = (rowData, sectionID, rowID) => {
return (
<div key={rowID} style={{ height:‘1rem’,marginTop:‘0.1rem’,background:’#ffffff’}}>

{rowData.messageTitle}

);
};
return (

<NavBar mode=“light” icon={} onLeftClick={() => this.props.history.go(-1)}>
新闻资讯
{/ —/}

<Tabs tabs={this.state.tabs} onTabClick={(tab, index) => {
this.state.pages.type = index;
this.state.pages.pageNum = 1;
this.setState({ refreshing: true, isLoading: true ,pages:this.state.pages,newsList:[]});
this.query(this.state.pages);
}}>
{/ ----/}

<ListView
ref={el => this.lv = el}
dataSource={this.state.dataSource}
renderFooter={() => (<div style={{ textAlign: ‘center’ }}>
{this.state.isLoading ? ‘加载中…’ : ‘已加载全部’}

)}
renderRow={row}
style={{
height: ‘100%’,
overflow: ‘auto’,
}}
pullToRefresh={}
scrollRenderAheadDistance={500}
onEndReached={this.onEndReached}
onEndReachedThreshold={10}
/>

)
}
componentDidMount(){
setTimeout(() => {
this.query(this.state.pages)
// this.rData = genData();
// this.setState({
// dataSource: this.state.dataSource.cloneWithRows(this.rData),
// isLoading: false,
// });
}, 600);
}
}
export default News;

效果如下

这是我demo的，如果多个页面要我封装了方法引入用

//下拉加载的方法
/***
//* pages分页
// *api请求数据
// *_this= this
// dataSource下拉刷新的实例
// isLoading加载
// * refreshing下拉刷新
// dataList数据
// ***/
export function loadingMore(api,pages,_this,dataSource,isLoading,refreshing,dataList) {
api(pages).then(res=>{
if(res.pages>=pages.pageNum){
pages.pageNum++;
dataList = […dataList,…res.list]
_this.setState({
dataList:dataList,
dataSource: dataSource.cloneWithRows(dataList),
isLoading: false,
pages:pages,
});
}else {
_this.setState({
isLoading: false
})
}
_this.setState({
refreshing:false
})
})
}