react-native scrollview触摸滚动事件

1、几个已知的滑动或者滑动开始结束的方法:

  1. onScroll:在滚动过程中, 每帧最多调用一次此函数, 调用的频率可以用scrollEventThrottle属性来控制.
  2. onMomentumScrollEnd:当一帧滚动完毕时调用.
  3. onScrollAnimationEnd :ios上的当滚动动画结束时调用.

2、还有其他的一些事件如下

触摸事件里面有携带event,大家可以再下面的方法里面更改一些view操作就可以打印出来这些event携带的信息了

  1. onScrollBeginDrag:一个子view滑动开始 拖动时触发,注意和onMomentumScrollBegin的区别
  2. onScrollEndDrag:一个子view滚动结束 拖拽时触发,注意和onMomentumScrollEnd的区别
  3. onTouchStart:按下屏幕时触发
  4. onTouchMove:移动手指时触发
  5. onTouchEnd:手指离开屏幕触摸结束时触发
  6. onMomentumScrollBegin:当一帧滚动开始时调用.
  7. onMomentumScrollEnd:当一帧滚动完毕时调用.
  8. onStartShouldSetResponder:触摸开始时是否成为响应者
  9. onStartShouldSetResponderCapture:防止子视图在触摸开始时成为应答器
  10. onScrollShouldSetResponder:滚动时是否成为响应者
  11. onResponderGrant:开始响应时触发
  12. onResponderRelease:手指释放后,视图成为响应者
  13. onResponderReject:响应拒绝
  14. onScroll:滚动时触发,会触发多次

3、下面就这些方法的顺序做个简单的介绍:

首先在ios上进行测试,测试的结果如下:
scrollview-ios

由上图可以看出执行的顺序,

  1. 首先是按下屏幕时触发onTouchStart,
  2. 然后手指移动触发onTouchMove,会调用一次或者多次,
  3. 如果左右滑动,滑动开始拖动触发onScrollBeginDrag,View开始变化,View成为响应者,
  4. 然后onScroll … onTouchMove这两个会触摸多次,
  5. 然后手指离开屏幕触发onResponderRelease,
  6. 接着触摸结束onTouchEnd
  7. 然后是滑动结束拖拽时触发onScrollEndDrag,接着就是一帧滚动的开始onMomentumScrollBegin,它的起始位置和onScrollEndDrag的结束位置重合;
  8. 然后是滚动滚动onScroll,
  9. 然后是一帧滚动的结束onMomentumScrollEnd,
  10. 最后偶尔还会滚动下onScroll,这个有时间不出来,我觉得跟有抖动一样

4、android上的时间分为两种,一个是滑动一次,一个是连续滑动两次甚至多次,详见下图:

4.1、滑动一次

scrollview-android滑动一次的结果

大家可以看出和ios的区别

  1. 少了个触摸结束onTouchEnd,onResponderGrant、onResponderRelease,这三个.
    直接就是触摸开始-->移动-->开始拖拽-->滚动-->拖拽结束(手指离开了)-->一帧滚动开始-->滚动-->一帧滚动结束-->滚动

  2. 如果不滑动,只是点击离开,只会触发onTouchStart和onTouchEnd;

4.2、滑动两次或者多次:

scrollview-android滑动2次的结果

猜你喜欢

转载自www.cnblogs.com/qiqi715/p/9556956.html