react-hooks+antd-moblie列表ListView组件分页

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import {Tabs,Menu,Flex,ListView} from 'antd-mobile'

import ajax from '../static/js/http'
import store from '../store'

import '../static/css/tongji.css'
import '../static/css/gonghuo.css'

import FooterTabBar from '../components/FooterTabbar'
import ChannelRanking from '../components/Cell'
import GoodsCell from '../components/GoodsCell'
import PageNull from '../components/PageNull'
import TopScreenMenu from '../components/TopScreenMenu'


const tabs = [
    { title: '商品库', sub: '1' },
    { title: '供应商', sub: '2' }
];

function Gonghuo(){
    
    const [loading, setLoading] = useState(true)
    const [pageNum,setPageNum] = useState(1)
	
    const ds = new ListView.DataSource({
        rowHasChanged: (row1,row2) => true
    })
    const [dataSource, setDataSource] = useState(ds)

    const [glist,setGlist] = useState([])

    useEffect(()=>{
        GoodsList()
    },[])
	
    const GoodsList = ()=>{
        setPageNum(pageNum+1)
        ajax('/ffkj-main/merchantCommodity/oa/list',{
            userId: store.state.sysuserId,
            commodityName: '',  //商品名称
            commodityContractTypeId: '',  //类目id
            label: '', //商品标签id
            merchantCommodityStatus: '',  //状态id
            pageNum: pageNum,
            pageSize: 10
        },'post',{}).then(res=>{
            if(res.code == 0){
                if( res.data.data.length == 0 ){
                    setPageNum(pageNum)
                    setLoading(false)
                    return false
                }
                else if( pageNum == 1 && res.data.data.length < 10 ){
                    setLoading(false)
                }

                setGlist([...glist,...res.data.data])
                setDataSource(dataSource.cloneWithRows([...glist,...res.data.data]))
            }
        })
    }




    return (
        <div className="tongjj" style={{height:'100vh'}}>
            <Tabs tabs={tabs}
            className="t-title" 
            initialPage={0}
            renderTab={tab => <span>{tab.title}</span>}
            >
                <div style={{display: 'block'}}>
                    <TopScreenMenu />
                    
                    // 列表数据
                    <div className="GoodsRanking">
                        {   
                            glist.length > 0 ? (
                                <ListView 
                                    dataSource={dataSource} 
                                    // 单个卡片组件
                                    renderRow={(item)=>(
                                        <Link to={'/qudaoDetails?id='+item.id} className="rds ai">
                                            <GoodsCell item={item} />
                                        </Link>
                                    )}
                                    initialListSize={10} 
                                    pageSize={10}  
                                    renderFooter={()=>(
                                        <div style={{ padding: 20, textAlign: 'center' }}>
                                            {
                                                loading ? '加载中...' : '哎呀，到底了'
                                            }
                                        </div>
                                    )}
                                    // 上拉数据更新
                                    onEndReached={GoodsList} 
                                    onEndReachedThreshold={50}
                                    style={{
                                        height: window.screen.height-120,
                                    }}
                                />
                            ) : <PageNull text='暂无列表数据~' />
                        }
                    </div>
                </div>
                // 列表数据 end
                
                <div className="GoodsRanking" style={{display: 'block',paddingTop: '.12rem'}}>
                    <ChannelRanking />
                </div>
            </Tabs>

            <FooterTabBar active='1' />
        </div>
    )
}

export default Gonghuo

效果如图：