【前端】react class组件+antd-mobile的下拉刷新上拉加载

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import './index.less'
import NavBar from '@/NavBar/'
import {getAddressList} from '@api/home'
import {ListView,PullToRefresh,Checkbox} from 'antd-mobile'
import { connect} from 'react-redux'
import {AsyncSelectorAddress} from "@redux/action"
const CheckboxItem = Checkbox.CheckboxItem;
class App extends Component {
    constructor(props){
        super();
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
        this.state = {
            dataSource:dataSource.cloneWithRows([]),
            refreshing: true,
            isLoading: true,
            height: document.documentElement.clientHeight,
            pageNum: 1,
            pageSize: 10,
            total: null,
            addressList: []
        }; 
    }
    componentDidMount(){
        const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
        this.setState({
            height: hei,
        });
        this._getAddressList()
    }
    _getAddressList(){
        const {pageNum,pageSize,addressList,dataSource} = this.state
        this.setState({
            refreshing: true,
            isLoading: true,
        })
        getAddressList({pageNum,pageSize,}).then(res => {
            if(res&&res.code===0){
                if(pageNum===1){
                    this.setState({
                        addressList:res.data.list,
                        dataSource: dataSource.cloneWithRows(res.data.list),
                        pageNum: pageNum +1,
                        refreshing: false,
                        isLoading: false,
                        total: res.data.total
                    })
                }else{
                    this.setState({
                        addressList:addressList.concat(res.data.list),
                        total: res.data.total
                    },()=>{
                        this.setState({
                            dataSource: dataSource.cloneWithRows(this.state.addressList),
                            pageNum: pageNum +1,
                            refreshing: false,
                            isLoading: false
                        })
                    })
                }
            }
        })
    }
    onRefresh =()=> {
        this.setState({
            pageNum: 1
        },()=>{
            this._getAddressList()
        })
    }
    onEndReached = ()=>{
        if(this.state.addressList.length === this.state.total){
            this.setState({
                refreshing: false,
                isLoading: false
            })
            return
        }
        this._getAddressList()
    }
    onChange = (e,item)=>{
        e = e || window.event;  
        e.stopPropagation()
        let obj = this.state.addressList.map(v=>{
            if(v.id === item.id){
                v.isDefault = true
                return v
            }else{
                v.isDefault = false
                return v
            }
        })
        this.setState({
            addressList: obj
        })
    }
    addressClick = (e,item)=>{
        // let nodeText = document.getElementsByTagName('body')
        // nodeText[0].style.backgroundColor = 'red'
        this.props.dispatchAddress(item)
        this.props.history.goBack()
    }
    row =(item)=> {
        return (
            <div key={item.id} className="address-item" onClick={(e)=>this.addressClick(e,item)}>
                <CheckboxItem checked={item.isDefault} onClick={(e) => this.onChange(e,item)}></CheckboxItem>
                <div className="add-cont">
                    <p>{item.phone} {item.isDefault ? <span className="mr">默认</span> : '' } </p>
                    <p>{item.provinceName}{item.cityName}{item.districtName}{item.streetName}{item.address}</p>
                </div>
                {/* <span className="btn">编辑</span> */}
            </div>
        )
    }
     // 渲染行数据之间的间隔DOM
     renderSeparator = (sectionId, rowId) => {
        return (
            <div
                key={rowId}
                style={{
                    backgroundColor: '#F5F5F9',
                    borderBottom: '1px solid #ECECED',
                }}
            />
        );
    }
    
    render() {
        return (
            <div>
                <NavBar {...this.props} title="请选择地扯"/>
                <div style={{minHeight:'100vh'}}>
                    <ListView
                        ref={el => this.lv = el}
                        dataSource={this.state.dataSource}
                        renderFooter={() => ( <div style={{ padding: 10, textAlign: 'center' }}>
                        {this.state.isLoading ? '加载中...' : this.state.addressList.length >10 ? '我是有底线的~' : null}
                        </div>)}
                         useBodyScroll
                        renderRow={(item)=>this.row(item)}
                        renderSeparator={(sectionId, rowId) => this.renderSeparator(sectionId, rowId)}
                        style={{
                            height: this.state.height,
                            margin: '5px 0',
                            overflow: 'auto',
                            minHeight: '100'
                        }}
                        pullToRefresh={<PullToRefresh
                            refreshing={this.state.refreshing}
                            onRefresh={this.onRefresh}  //下拉刷新
                        />}
                        onEndReachedThreshold={10}
                        onEndReached={this.onEndReached} //上拉加载
                        pageSize={10}
                    />
                </div>
            </div>
        )
    }
}

export default connect(null,dispatch=>({
    dispatchAddress(data){
        dispatch(AsyncSelectorAddress(data))
    }
}))(App)