//获取元素高度
const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).offsetTop;

//元素
<div ref={el => this.lv = el}></div>
    



//优化方式  2种都有一个BUG  初始化数据只能加载10条 并且全局下拉刷新 无效果
import { connect } from 'react-redux';
import {hideLoading, showLoading, showMessage, WARNING} from "../../../../store/actions";
import {Toast,PullToRefresh, ListView} from 'antd-mobile';
import styles from '../../newPages/css/home.less'

/* 拉动刷新 */
class cs3 extends PageComponent {
    constructor(props, context) {
        super(props, context);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
        this.state = {
            couponList:[], //数据
            pageNo: 0, //页码
            pageSize: 10, // 分页size
            totalPage: 0, // 总页数初始化
            refreshing: false, // 是否显示刷新状态
            dataSource, //ListView 类
            isLoading: true, // 是否显示加载状态
            height: document.documentElement.clientHeight, //获取屏幕高度  局部请自己定义
            useBodyScroll:false,//false局部翻页  true全页面
        };
    }

    componentDidMount() {
        this.getItem(); //获取数据
    }

    //配合拉动是全局还是局部
    componentDidUpdate() {
        if (this.state.useBodyScroll) {
            document.body.style.overflow = 'auto';
        } else {
            document.body.style.overflow = 'hidden';
        }
    }

    getItem=()=>{
        this.request("GET", '/api/college?page='+(this.state.pageNo)+'&size='+this.state.pageSize,
            null, { Authorization: systemApi.getValue("token") }, null)
            .done((data) => {
                alert("1")
                let couponList=[...this.state.couponList, ...data.result]

                this.setState({
                    pageNo: this.state.pageNo + 1,//每次加载数据+1
                    couponList: couponList,
                    dataSource: this.state.dataSource.cloneWithRows(couponList), // 数据源dataSource
                    totalPage: Math.ceil(500 / this.state.pageSize),//总页数
                    refreshing: false,
                    isLoading: false,
                })
            }).fail((data) => {
        });
    }

    // 下拉刷新
    onRefresh = () => {
        Toast.loading();
        this.setState({
            pageNo: 0,
            totalPage: 0,
            couponList: [],
        },()=>{
            this.getItem()//清空 并获取数据
        })
    };

// 加载更多
    onEndReached = () => {
        if (this.state.isLoading || (this.state.totalPage < this.state.pageNo +1)) {
           console.log("最大页面")
            Toast.success("已经最后一页",2)
            return;
        }
        this.setState({
            isLoading: true, //显示加载...
        },()=>{
            setTimeout(() => {
                this.setState({
                    isLoading: false,
                });
                this.getItem();
            }, 1000);
        });
    };

    render() {
        //数据模板
        const row =  (rowData, sectionID, rowID) => {
            return (
                <div key={rowID}>
                   <div style={{"height":"2rem"}}>{rowData.id}{rowData.name}</div>
                </div>
            );
        } ;

        return (
            <Container className={styles.container} >
                <div className={styles.d}>
                    <ListView
                        key={this.state.useBodyScroll ? '0' : '1'}
                        ref={el => this.lv = el}
                        dataSource={this.state.dataSource}
                        renderHeader={() => <div style={{"height":"10px"}}></div>} //数据头部 没有太紧凑
                        renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                            {this.state.isLoading ? 'Loading...' : '最后一页'}
                        </div>)} //每次数据底部内容）
                        renderRow={row}
                        useBodyScroll={this.state.useBodyScroll}
                        pullToRefresh={<PullToRefresh
                            refreshing={this.state.refreshing}
                            onRefresh={this.onRefresh}
                        />}
                        onEndReached={this.onEndReached}
                        pageSize={this.state.pageSize}
                        //direction={'up'}
                        style={this.state.useBodyScroll ? {} : {height:this.state.height,border: '1px solid #ff0',margin: '5px 0',}} //整体边框
                    />
                </div>

            </Container>
        )
    }
}
function injectAction() {
    return { hideLoading, showLoading, showMessage, WARNING };
}

module.exports = connect(null, injectAction())(cs3);

//官方方式
import { connect } from 'react-redux';
import {hideLoading, showLoading, showMessage, WARNING} from "../../../../store/actions";
import {Toast,PullToRefresh, Button,ListView  } from 'antd-mobile';
import styles from '../../newPages/css/home.less'

/* 学校组件 */
class cs4 extends PageComponent {
    constructor(props, context) {
        super(props, context);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });

        this.state = {
            pageNo: 0, //页码
            pageSize: 10, // 分页size
            totalPage: 0, // 总页数初始化
            item:[],
            dataSource,
            refreshing: true,
            isLoading: true,
            useBodyScroll:false,//false局部翻页  true全页面
        };
    }
    componentDidMount() {
        this.getItem();
    }

    //获取数据
    getItem=()=>{
        var i=10;
        this.request("GET", '/api/college?page='+(this.state.pageNo)+'&size='+this.state.pageSize,
            null, { Authorization: systemApi.getValue("token") }, null)
            .done((data) => {
                //数据组合
                let item=[...this.state.item,...data.result]
                this.setState({
                    pageNo: this.state.pageNo + 1,
                    item: item,
                    dataSource: this.state.dataSource.cloneWithRows(item), // 数据源dataSource
                    totalPage: Math.ceil(500 / this.state.pageSize),
                    refreshing: false,
                    isLoading: false,
                })
            }).fail((data) => {
        });
    }

    //配合拉动是全局还是局部
    componentDidUpdate() {
        if (this.state.useBodyScroll) {
            document.body.style.overflow = 'auto';
        } else {
            document.body.style.overflow = 'hidden';
        }
    }

    onRefresh = () => {
        this.setState({ refreshing: true, isLoading: true });
        // 延迟刷新
        setTimeout(() => {
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.state.item),
                refreshing: false,
                isLoading: false,
                pageNo:this.state.pageNo - 1,
                totalPage: 0,
            });
            this.getItem()
        }, 600);
    };


    //翻页
    onEndReached = (event) => {
        console.log("翻页："+this.state.pageNo)
        if(this.state.totalPage < this.state.pageNo +1){
            this.setState({
                isLoading: false,
            });
            Toast.success("最大页面了",2)
            return;
        }

        this.setState({ isLoading: true });
        setTimeout(() => {
            this.setState({
                isLoading: false,
            });
            this.getItem();
        }, 1000);
    };



    render() {
        const separator = (sectionID, rowID) => (
            //每个内容内间 间隔
            <div key={`${sectionID}-${rowID}`} style={{height:"10px",backgroundColor:"#f1f1f1"}}></div>
        );

        //数据遍历
        let index = this.state.item.length - 1;
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = this.state.item.length - 1;
            }
            const obj = this.state.item[index--];
            return (
                <div key={rowID} style={{padding: '0 15px',backgroundColor: 'white',}}>
                    <div style={{"height":"1rem","line-height":"1rem"}}>{obj.id}{obj.name}{rowID}</div>
                </div>
            );
        };
        return (
            <Container className={styles.container} >
                <div className={styles.d}>


                    <div style={{"height":"1rem"}}>
                        <ListView
                            key={this.state.useBodyScroll ? '0' : '1'}
                            ref={el => this.lv = el}
                            dataSource={this.state.dataSource}
                            renderHeader={() => <div style={{"height":"10px"}}></div>} //数据头部 没有太紧凑
                            renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                                {this.state.isLoading ? 'Loading...' : '最后一页'}
                            </div>)}
                            renderRow={row}
                            renderSeparator={separator} //间隔
                            useBodyScroll={this.state.useBodyScroll}
                            style={this.state.useBodyScroll ? {height:document.documentElement.clientHeight,border: '1px solid #ff0',margin: '5px 0',} : {height:"5rem",border: '1px solid #ff0',margin: '5px 0',}} //整体边框
                            pullToRefresh={<PullToRefresh
                                refreshing={this.state.refreshing}
                                onRefresh={this.onRefresh}
                            />}
                            onEndReached={this.onEndReached}
                            pageSize={this.state.pageSize} //翻页显示多少个
                        />
                    </div>
                </div>

            </Container>
        )
    }
}
function injectAction() {
    return { hideLoading, showLoading, showMessage, WARNING };
}

module.exports = connect(null, injectAction())(cs4);