react ＋ antd-mobile 的listview 在h

近期的项目是使用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;