React Ant Design Mobile ListView 上拉刷新，下拉加载

Z时代
2024-01-10
分类：综合

react

import React from 'react'
import './earnings.scss'
import { ListView, PullToRefresh } from 'antd-mobile';
export default class Earnings extends React.Component {
    constructor(props) {
        super(props)
        const dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });
        this.state = {
            dataSource,
            firstArr:['苹果','栗子','橘子','桃子','葡萄','苹果1','栗子2','橘子3','桃子4','葡萄5','苹果6','栗子7','橘子8','桃子9','葡萄0'],
            firstArr1:['苹果s','栗子ss','橘子ssss','桃子sss','葡萄sss','苹果1sss','栗子2sss','橘子3ss','桃子4ss','葡萄ss5'],
            refreshing: false, //上拉刷新
            isLoading: true, //数据是否加载完毕
            num:0
        }
    }
    componentDidMount(){
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows({...this.state.firstArr})
        })
    }
    //下拉刷新
    onRefresh = () => {
        this.setState({ refreshing: true })
        //接口请求第一页数据,完成后将refreshing设为false
        setTimeout(()=>{
            this.setState({
                refreshing: false
            })
        },2000)
    }
    // 滑动到底部时加载更多
    onEndReached = (event) => {
        // 显示加载loading....
        this.setState({
            isLoading: false 
        })
        // 当this.state.num 》 1时，规定为数据加载完毕
        if(this.state.num > 1){
            this.setState({
                isLoading : true
            })
            return false
        }
        // 等待2s后再原始数据上追加数据
        setTimeout(() => {
            this.setState({
                firstArr: [...this.state.firstArr,...this.state.firstArr1]
            },()=>{
                // 数据发生改变是要使用cloneWithRows通知
                this.setState({
                    num: this.state.num += 1,
                    dataSource: this.state.dataSource.cloneWithRows({...this.state.firstArr}),
                })
                console.log(this.state)
            })
        },2000)
    }
render() {
        const row = (rowData, sectionID, rowID) => {
            // 这里rowData,就是上面方法cloneWithRows的数组遍历的单条数据了，直接用就行
            // console.log('rowData', rowData);
            // console.log('sectionID', sectionID);
            // console.log('rowID', rowID);
            return (
                <div className="earnings">
                    <div className="content">
                        <span className="date box">{rowData}</span>
                        <span className="money box">0.30元</span>
                    </div>
                </div>
            )
        }
        return (
            <div className="earnings-list">
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={row}
                    initialListSize={15}
                    pageSize={10}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={10}
                    useBodyScroll={false}
                    renderHeader={() => 
                        (
                            <div className="earnings-title">
                                <span>日期</span>
                                <span>好友贡献奖励</span>
                            </div>
                        )
                    }
                    renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                        { !this.state.isLoading ? '加载中....' : '我是有底线的'}
                    </div>)}
                    style={{ width: '100vw', height: '100vh' }}
                    pullToRefresh={<PullToRefresh // import { PullToRefresh } from 'antd-mobile'
                        refreshing={this.state.refreshing}
                        onRefresh={this.onRefresh}
                    />}
                />
            </div>
        )
    }
}

.earnings-list{
    background: #ffffff;
    .earnings{
        h1{
            margin: 0;
        }
        padding: .2rem;
        .content{
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #EEEEEE;
            line-height: .8rem;
            padding: 0 .4rem;
            .box{
                font-size: .28rem;
            }
            .date{
                color: #333333;
            }
            .money{
                color: #FF7841;
            }
        }
    }
    .am-list-header{
        background: #ffffff;
    }
    .am-list-body::after{
        background-color: #ffffff !important;
    }
    .am-list-body::before{
        background-color: #ffffff !important;
    }
    .earnings-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #EEEEEE;
        line-height: .8rem;
        padding: 0 .2rem;
        span{
            color: #999999;
            font-size: .24rem;
        }
    }
}