react-native ScrollView的吸顶效果

一、基本布局

WechatIMG3.jpeg

二、实现

   this._onScroll(e)}
         refreshControl={
            
         }
  >
      <顶部卡片组件>
      <表单列表组件>
          map循环数据列表。。。
      
  

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,
      })
    }