zoukankan      html  css  js  c++  java
  • react native的flatList

    1:关于这个组件的上拉加载:

    onEndReached={(info) => {
    if ((!this.state.loading && info.distanceFromEnd > 0) && this.state.list.length < parseInt(this.state.total)) {
    this.pageindex++;
    this.getList()
    }
    }}
    ListFooterComponent={this.allList.length == parseInt(this.state.total) ? null :
    <FooterLoading/>}
    onEndReachedThreshold={0.1}
    如代码所示需要用到的是onEndReached,onEndReachedThreshold.onEndReachedThreshold这个属性表示当下滑距离底部的距离为屏幕的比例为10%的时候触发onEndReached这个方法
    .但是有一种情况就是入股首次加载的数据不够一屏他就会自动继续加载.!this.state.loading && info.distanceFromEnd > 0这个条件表示首次加载之后再继续加载一次.(bug:不一定加载两次之后就会占满屏幕)
    然后加载完之后不应该继续请求数据.而且也不应该继续显示footerLoding.

    2:下拉刷新:
    refreshing={this.state.refresh}
    refreshControl={this.onRefresh()}
    没刷新的时候应该设置refreshing为false . 调用这个refreshControl方法的时候要设置refreshing为true
    onRefresh() {
    return (
    <RefreshControl
    refreshing={this.state.refresh}
    onRefresh={() => {
    this.pageindex = 1;
    this.setState({
    refresh: true,
    list: [],
    total: 0
    }, () => {
    this.returnList = [];
    this.exchangeList = [];
    this.allList = [];
    this.getList();
    });
    }}
    tintColor="#0dcb6b"
    title="加载中..."
    titleColor="#0dcb6b"
    colors={['#fff']}
    progressBackgroundColor="#0dcb6b"
    />
    )
    }
    注意的是刷新完成之后应该要设置refreshing为false.
  • 相关阅读:
    github和bitbucket
    shell 删除文件下的* (copy).jpg备份文件
    linux 的iptables防火墙
    yum使用本地源
    linux的vnc- rdesktop远程登录windows桌面
    httpd/php/mysql的安装-1
    linux下的视频音频播放器终极解决方案
    linux读写ntfs
    示波器和三极管
    电子技术中的dB
  • 原文地址:https://www.cnblogs.com/dragonh/p/7490132.html
Copyright © 2011-2022 走看看