React Native中ScrollView的滚动事件

如果在react-native的某个组件中使用到了ScrollView组件,当滚动的时候想要获取到当前滚动的距离,来处理一些逻辑,可以在onScroll属性中获取到当前的位置。

在滚动的过程中,每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。这个事件拥有这些模型:

{
  nativeEvent: { 
    contentInset: { bottom, left, right, top }, //内容视图嵌入到封闭的滚动视图的距离(也就是滚动时超出容器的值)
    contentOffset: { x, y }, //偏移量 x:横向 y:纵向
    contentSize: { height, width }, // 容器尺寸
    layoutMeasurement: { height, width }, // layout尺寸
    zoomScale 
  }
}

以上所有值都是number类型。

比如要实现一个点击回到顶部的功能:

<ScrollView
  ref={(r) => { this.sv = r; }}
  style={{ backgroundColor: '#eee' }}
  onScroll={(event) => this.setState({ y: event.nativeEvent.contentOffset.y })}
  scrollEventThrottle={200}
>
  <View style={{ height: 500, backgroundColor: '#fff' }} />
  <View style={{ height: 500, backgroundColor: 'red' }} />
  <View style={{ height: 500, backgroundColor: 'blue' }} />
</ScrollView>
{y > 0 && (
  <View style={{ width: 120, height: 120, borderRadius: 60, position: 'absolute', right: 20, bottom: 40, zIndex: 99, overflow: "hidden" }}>
    <Button
    onPress={() => this.sv.scrollTo({ x: 0, y: 0, animated: true })}
    >
    top
    </Button>
  </View>
)}

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×