近期的项目是使用react＋antd-mobile的h5移动网页端的一个程序，其中一个功能是一个展示列表，具有下拉刷新和上滑加载更多的一个功能，下面就介绍一下这个功能的具体实现；
首先这里我用了antd-mobile的listView和RefreshControl的组件，想了解更多的可以去官网看看 https://mobile.ant.design/docs/react/introduce-cn
（PS：我当时用这个组件的时候，API还没有这么完善，大部分都是去react-native的官方文档中查看的，等我做完了再来看官网就几本跟新的差不多了，也是一把辛酸泪呀～～～～看来官网的维护还是很好的）
这里说一下，如果你要用到RefreshControl的一些监听事件的话，最好吧antd-mobile版本更新一下（最少更新到1.6.1以上），低版本的不支持它的一些监听事件，会报错，如：Uncaught TypeError: this.refs.lv.getInnerViewNode is not a function，版本更新一下就好了。
https://github.com/ant-design/ant-design-mobile/issues/1723
还有个比较重要的是listView的dataSource属性的参数问题需要注意一下，可以参考 https://reactnative.cn/docs/0.26/listviewdatasource.html
接下来就看一下具体的实现过程：
首先引入用到的组件
import { RefreshControl, ListView, Toast, List } from 'antd-mobile';
使用ListView，在ListView中使用RefreshControl
renderList() {
const row = (dataRow) => {
return (
<div key={dataRow} className="one-output-item" onClick={this.getOutputDetails.bind(this, dataRow)} >
{dataRow &&
<Item extra={dataRow.balanceAmount && dataRow.balanceAmount.toFixed(2)}>{dataRow.name}</Item>
}
</div>
)
}
return (
<ListView
ref={el => this.lv = el}
dataSource={this.state.dataSource}
renderRow={row}
initialListSize={this.state.pageSize}
pageSize={this.state.pageSize}
style={{
height: this.state.height,
}}
scrollerOptions={{ scrollbars: true }}
refreshControl={<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
/>}
onScroll={this.onScroll}
scrollRenderAheadDistance={200}
scrollEventThrottle={20}
onEndReached={this.onEndReached}
onEndReachedThreshold={20}
renderFooter={() => (<p >
{this.state.hasMore ? '正在加载更多的数据...' : '已经全部加载完毕'}
</p>)
}
/>
)
}
dataSource: 数据源，给其赋值；
renderRow: 简单来说就是接受数据源中的数据，然后渲染出来；
initialListSize: 指定在组件刚挂载的时候渲染多少行数据；
refreshControl：下拉刷新组件，其中的onRefresh是刷新回调函数，refreshing是刷新回调函数；
（PS：官网解释的很详细来，就不一一介绍了）
下拉刷新
onRefresh = () => {
if (!this.manuallyRefresh) {
this.setState({ refreshing: true });
} else {
this.manuallyRefresh = false;
}
//刷新列表，渲染第一页数据
this.refreshList();
};
上滑加载更多，实现分页
onEndReached = (event) => {
if (this.state.isLoading ) {
return false;
}
if ( !this.state.hasMore) {
return false;
}
this.setState({ isLoading: true });
setTimeout(() => {
this.getOutputList();
}, 1000);
}
import React from 'react';
import { Flex } from 'antd-mobile';
import { RefreshControl, ListView, Button, Toast, List } from 'antd-mobile';
const Item = List.Item;
class OutputList extends React.Component {
constructor (props) {
super(props)
const dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
})
this.initData = props.dataList;
this.state = {
dataSource: dataSource.cloneWithRows(this.initData),
refreshing: false,
height: document.documentElement.clientHeight,
currentPage: 0,
pageSize: 20,
data: [],
hasMore: true,
isLoading: false
};
if(props.dataList.length < this.state.pageSize){
this.state.hasMore = false
}
}
componentDidMount() {
this.renderResize();
// Set the appropriate height
setTimeout(() => this.setState({
height: (this.state.height - 50 - 198 - 50) + "px",
}), 0);
}
renderResize = () => {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if( width > height ){
this.setState({
height: (height - 50 - 198 - 50) + "px",
})
} else{
this.setState({
height: (height - 50 - 198 - 50) + "px",
})
}
}
componentWillMount(){
window.addEventListener("resize", this.renderResize, false);
}
componentWillUnmount = () => {
window.removeEventListener("resize", this.renderResize, false);
}
onScroll = (e) => {
this.st = e.scroller.getValues().top;
this.domScroller = e;
};
getOutputList = () => {
let params = {
pageNo: this.state.currentPage++,
pageSize: this.state.pageSize,
}
if(this.state.hasMore){
getOutputList (params).then((data) => {
setTimeout(() => {
if(data.dataList.length < this.state.pageSize){
this.setState({
hasMore: false
});
}
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.initData.concat(data.dataList)),
refreshing: false,
isLoading: false,
currentPage: params.pageNo
});
this.initData = data.dataList.concat(this.initData);
}, 600);
}, (data) => {
if (data.messageCode !== 'netError' && data.messageCode !== 'sysError' && data.messageCode !== 'timeout') {
setTimeout(() => {
this.setState({
refreshing: false,
isLoading: false,
});
}, 600);
Toast.info(data.message, commonInfo.showToastTime);
}
});
}else{
setTimeout(() => {
this.setState({
refreshing: false,
isLoading: false,
});
}, 600);
}
}
refreshList = () => {
let params = {
pageNo: 0,
pageSize: this.state.pageSize,
}
getOutputList(params).then((data) => {
if (data.dataList.length < this.state.pageSize) {
this.setState({
hasMore: false
});
} else {
this.setState({
hasMore: true
});
}
this.setState({
dataSource: this.state.dataSource.cloneWithRows(data.dataList),
refreshing: false,
isLoading: false,
currentPage: params.pageNo
});
this.initData = data.dataList;
}, (data) => {
if (data.messageCode !== 'netError' && data.messageCode !== 'sysError' && data.messageCode !== 'timeout') {
setTimeout(() => {
this.setState({
refreshing: false,
isLoading: false,
});
}, 600);
Toast.info(data.message, commonInfo.showToastTime);
commonInfo.hasLoading = true;
}
});
}
onEndReached = (event) => {
if (this.state.isLoading ) {
return false;
}
if ( !this.state.hasMore) {
return false;
}
this.setState({ isLoading: true });
setTimeout(() => {
this.getOutputList();
}, 1000);
}
onRefresh = () => {
if (!this.manuallyRefresh) {
this.setState({ refreshing: true });
} else {
this.manuallyRefresh = false;
}
this.refreshList();
};
// If you use redux, the data maybe at props, you need use `componentWillReceiveProps`
componentWillReceiveProps = (props) => {
this.initData = props.dataList;
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.initData),
});
}
renderList() {
const row = (dataRow) => {
return (
<div key={dataRow} className="one-output-item" >
{dataRow &&
<Item extra={dataRow.balanceAmount && dataRow.balanceAmount.toFixed(2)}>{dataRow.name}</Item>
}
</div>
)
}
return (
<ListView
ref={el => this.lv = el}
dataSource={this.state.dataSource}
renderRow={row}
initialListSize={this.state.pageSize}
pageSize={this.state.pageSize}
style={{
height: this.state.height,
}}
scrollerOptions={{ scrollbars: true }}
refreshControl={<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
/>}
onScroll={this.onScroll}
scrollRenderAheadDistance={200}
scrollEventThrottle={20}
onEndReached={this.onEndReached}
onEndReachedThreshold={20}
renderFooter={() => (<p >
{this.state.hasMore ? '正在加载更多的数据...' : '已经全部加载完毕'}
</p>)
}
/>
)
}
render() {
return (
<div>
{this.renderList()}
</div>
);
}
}
OutputList = createForm()(OutputList);
export default OutputList;
