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

CheckboxItem不用看,还没完善,有一些语法重复判断需要更改
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 (
            
this.addressClick(e,item)}> this.onChange(e,item)}>

{item.phone} {item.isDefault ? 默认 : '' }

{item.provinceName}{item.cityName}{item.districtName}{item.streetName}{item.address}

{/* 编辑 */}
) } // 渲染行数据之间的间隔DOM renderSeparator = (sectionId, rowId) => { return (
); } render() { return (
this.lv = el} dataSource={this.state.dataSource} renderFooter={() => (
{this.state.isLoading ? '加载中...' : this.state.addressList.length >10 ? '我是有底线的~' : null}
)} 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={} onEndReachedThreshold={10} onEndReached={this.onEndReached} //上拉加载 pageSize={10} />
) } } export default connect(null,dispatch=>({ dispatchAddress(data){ dispatch(AsyncSelectorAddress(data)) } }))(App)

你可能感兴趣的:(react class组件+antd-mobile的下拉刷新上拉加载)