近期的項目是使用react＋antd-mobile的h5移動網(wǎng)頁端的一個程序单料，其中一個功能是一個展示列表悔政，具有下拉刷新和上滑加載更多的一個功能，下面就介紹一下這個功能的具體實現(xiàn)；
首先這里我用了antd-mobile的listView和RefreshControl的組件街氢，想了解更多的可以去官網(wǎng)看看 https://mobile.ant.design/docs/react/introduce-cn
（PS：我當(dāng)時用這個組件的時候突诬，API還沒有這么完善苫拍，大部分都是去react-native的官方文檔中查看的芜繁，等我做完了再來看官網(wǎng)就幾本跟新的差不多了，也是一把辛酸淚呀～～～～看來官網(wǎng)的維護(hù)還是很好的）
這里說一下绒极，如果你要用到RefreshControl的一些監(jiān)聽事件的話骏令，最好吧antd-mobile版本更新一下（最少更新到1.6.1以上），低版本的不支持它的一些監(jiān)聽事件垄提，會報錯榔袋，如：Uncaught TypeError: this.refs.lv.getInnerViewNode is not a function，版本更新一下就好了铡俐。
https://github.com/ant-design/ant-design-mobile/issues/1723
還有個比較重要的是listView的dataSource屬性的參數(shù)問題需要注意一下凰兑，可以參考 https://reactnative.cn/docs/0.26/listviewdatasource.html
接下來就看一下具體的實現(xiàn)過程：
首先引入用到的組件
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 ? '正在加載更多的數(shù)據(jù)...' : '已經(jīng)全部加載完畢'}
</p>)
}
/>
)
}
dataSource: 數(shù)據(jù)源审丘，給其賦值吏够；
renderRow: 簡單來說就是接受數(shù)據(jù)源中的數(shù)據(jù)，然后渲染出來滩报；
initialListSize: 指定在組件剛掛載的時候渲染多少行數(shù)據(jù)稿饰；
refreshControl：下拉刷新組件，其中的onRefresh是刷新回調(diào)函數(shù)露泊，refreshing是刷新回調(diào)函數(shù)喉镰；
（PS：官網(wǎng)解釋的很詳細(xì)來，就不一一介紹了）
下拉刷新
onRefresh = () => {
if (!this.manuallyRefresh) {
this.setState({ refreshing: true });
} else {
this.manuallyRefresh = false;
}
//刷新列表惭笑，渲染第一頁數(shù)據(jù)
this.refreshList();
};
上滑加載更多侣姆，實現(xiàn)分頁
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 ? '正在加載更多的數(shù)據(jù)...' : '已經(jīng)全部加載完畢'}
</p>)
}
/>
)
}
render() {
return (
<div>
{this.renderList()}
</div>
);
}
}
OutputList = createForm()(OutputList);
export default OutputList;
