reactnative实现下拉加载更多

最新推荐文章于 2024-03-27 15:16:44 发布

一只白色的猫

最新推荐文章于 2024-03-27 15:16:44 发布

阅读量499

点赞数 11

分类专栏： reactnative 文章标签： react native react.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_42062619/article/details/135038673

版权

reactnative 专栏收录该内容

4 篇文章

订阅专栏

在做列表页时，需要实现下滑加载下一页的数据，我使用的是react native原生的组件FlatList,话不多说，一起来看看吧

<SafeAreaView style={{flex:1,backgroundColor:'#F7F7F7',paddingHorizontal:10}}>
        {loding?<ActivityIndicator/>:<FlatList
        data={listData}
        onEndReached={() => onLoadMore()}
        onEndReachedThreshold={0.2}
        renderItem={renderItem}
        ListHeaderComponent={() => (!listData.length?
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
             <Image style={{width:160,height:160}} source={require('../../assets/images/noData.png')} />
              <Text style={{color:'#828282'}}>暂无数据~</Text>
          </View>:null)
         }
        keyExtractor={(item:any) => item.id}
        />}
       </SafeAreaView>

const onLoadMore = ()=>{
  if(pages > param.current ){
    const params = {...param,current: param.current+1}
    getList(params).then((res:any)=>{
      if(res.data){
        const list = [...listData,...res.data.records]
        setList(list)
        setParam(params)
      }
    })
  }else{
    console.log('不可以加载了',param.current,pages);
    return
  }
  
}
const renderItem = (item:any) => (
  
  <IistItem info={item.item} navigation={props.navigation} />
);