react-native ScrollView的吸顶效果

一、基本布局

二、实现

  <ScrollView
         style={styles.container}
         onScroll={(e) => this._onScroll(e)}
         refreshControl={
            <RefreshControl
                  refreshing={false}
                  colors={['#ff0000', '#00ff00', '#0000ff']}
                  progressBackgroundColor={'#ffffff'}
                  onRefresh={this._onRefresh}
             />
         }
  >
      <顶部卡片组件>
      <表单列表组件>
          map循环数据列表。。。
      </表单列表组件>
  </ScrollView>

js 滚动监听事件

_onScroll = (e) => {
    const {topHeader} = this.state;
    const {getListApi, pageNo, count} = this.props.platformStore;
    let { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
    let offsetY = contentOffset.y;
    let contentSizeHeight = contentSize.height;
    let oriageScrollHeight = layoutMeasurement.height;
    if(offsetY + oriageScrollHeight >= contentSizeHeight){
      console.log('触底了');
      if(data.length < count){  // count后台数据返回的总条数
       getListApi(pageNo, 10);
      }
    }

    // 340 是顶部固定的高度 默认在顶部布局一个不显示的表头
    if(!topHeader && offsetY > 340){  
      console.log('第一次触顶吸附');
      this.setState({
        topHeader: true,
      });
    } else if(topHeader && offsetY < 340){
      // 已经是吸附状态
      console.log('下拉放开吸附');
      this.setState({
        topHeader: false,
      })
    }