React Native中监听ScrollView滑到底部事件监听

笒羽

首先找到ScrollView 中滑动结束后触发的函数 可以找到onMomentumScrollEnd

1. <ScrollView
   
2.             style={{flex:1}}
   
3.             onRefresh = {this._onRefreshData}
   
4.             onMomentumScrollEnd = {this._contentViewScroll}
   
5.             refreshing={this.state.refreshing}
   
6.             automaticallyAdjustContentInsets={false}
   
7.             showsVerticalScrollIndicator={false}
   
8.             scrollsToTop={true}>
   
9.             {<View/>}

复制代码

我们需要知道当前ScrollView中 滑动的距离， contentOffset.y contentSize.height ScrollView 高度，三个变量来确定当前有没有滑动到底部。好在事件中都具有这些属性

1.     _contentViewScroll(e: Object){
   
2.         var offsetY = e.nativeEvent.contentOffset.y; //滑动距离
   
3.         var contentSizeHeight = e.nativeEvent.contentSize.height; //scrollView contentSize高度
   
4.         var oriageScrollHeight = e.nativeEvent.layoutMeasurement.height; //scrollView高度
   
5.         if (offsetY + oriageScrollHeight >= contentSizeHeight){
   
6.             Console.log('上传滑动到底部事件')
   
7.         }
   
8.     },

复制代码