React Ant Design Mobile ListView上拉加载数据（react实现上拉加载）

向右看齐 2022-11-20 09:46 383阅读 0赞

# Ⅰ- 壹 - 使用 #

**Ant Design Mobile ListView官网：**  
https://mobile.ant.design/components/list-view-cn/

import React, {  useState,useEffect}from 'react'
    import {  ListView ,Toast} from 'antd-mobile';
    
    
    const DetailsCe = (props) => { 
       
      const dataSource = new ListView.DataSource({ 
        rowHasChanged: (row1, row2) => row1 !== row2,// 用其进行数据变更的比较 必须这么写
      });
      //初始化数据
      const [state, setState] = useState({ 
        dataSource,
        isLoading: true,
        height: document.documentElement.clientHeight * 3 / 4,
      })
    
      //给初始化数据 赋值
      //根据自己的需求赋值 我这个是从父组件传过来的
      
      useEffect(() => {  
    
        console.log(props);
        console.log("asjkdhfksd");
        const len = props.dataList.length 
        console.log(props);
        if (len <= 0) {  // 判断是否已经没有数据了
          setState({ 
            isLoading: false,
          })
          Toast.info('没有数据了~', 1)
          return false
        }
    
        setState({ 
          dataSource: state.dataSource.cloneWithRows(props.dataList), 
          isLoading: false,
        });
      },[])
    
      //触底触发的函数
      const onEndReached = (event) => { 
        console.log("到底了啊????");
    
      }
    
    
      //可渲染的组件 固定写法 
      const row = (rowData, sectionID, rowID) => { 
        //rowData里面的数据就是 state.dataSource里面的数据
        console.log(rowData, rowID);
        //下面是根据自己的要求 进行渲染
        return (
      
    
     		<p>里面写渲染</p>
    
        
        );
      };
      return (
        <ListView
    
          dataSource={ state.dataSource}  //dataSource依赖的数据
          renderFooter={ () => (<div style={ {  padding: 30, textAlign: 'center' }}>
            { state.isLoading ? 'Loading...' : 'Loaded'}
          </div>)}
    
    
          renderRow={ row} //用于渲染方法 固定写法
    
          style={ { 
            height: state.height,
            overflow: 'auto',
            height: "100%"
          }}
        pageSize={ 4}
        onScroll={ () => {  console.log('滚动了'); }}
        scrollRenderAheadDistance={ 500}
        onEndReached={ onEndReached}
        onEndReachedThreshold={ 10}
      />
      )
    }
    export default DetailsCe

# 注意 #

## 修改数据dataSource必须调用这个方法 ##

https://returnc.com/detail/3780