Voyz's Studio.

ReactNative的scrollview触摸滚动事件

字数统计: 784阅读时长: 2 min
2019/07/10 Share

ReactNative的scrollview触摸滚动事件

已知的滑动或者滑动开始结束的方法

1
2
3
4
5
onScroll:在滚动过程中, 每帧最多调用一次此函数, 调用的频率可以用scrollEventThrottle属性来控制.

onMomentumScrollEnd:当一帧滚动完毕时调用.

onScrollAnimationEnd :ios上的当滚动动画结束时调用.

触摸事件里面有携带event

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1onScrollBeginDrag:一个子view滑动开始拖动开始时触发,注意和onMomentumScrollBegin的区别

2onScrollEndDrag:一个子view滚动结束拖拽时触发,注意和onMomentumScrollEnd的区别

3onTouchStart:按下屏幕时触发

4onTouchMove:移动手指时触发

5onTouchEnd:手指离开屏幕触摸结束时触发

6onMomentumScrollBegin:当一帧滚动开始时调用.

7onMomentumScrollEnd:当一帧滚动完毕时调用.

8onStartShouldSetResponder:触摸开始时是否成为响应者

9onStartShouldSetResponderCapture:防止子视图在触摸开始时成为应答器

10onScrollShouldSetResponder:滚动时是否成为响应者

11onResponderGrant:开始响应时触发

12onResponderRelease:手指释放后,视图成为响应者

13onResponderReject:响应拒绝

14onScroll:滚动时触发,会触发多次

IOS执行顺序

1401554-8a306a1ea62d8181.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
首先是按下屏幕时触发onTouchStart,

然后手指移动触发onTouchMove,会调用一次或者多次,

如果左右滑动,滑动开始拖动触发onScrollBeginDrag,View开始变化,View成为响应者,

然后onScroll … onTouchMove这两个会触摸多次,

然后手指离开屏幕触发onResponderRelease,

接着触摸结束onTouchEnd

然后是滑动结束拖拽时触发onScrollEndDrag,接着就是一帧滚动的开始onMomentumScrollBegin,它的起始位置和onScrollEndDrag的结束位置重合;

然后是滚动滚动onScroll,

然后是一帧滚动的结束onMomentumScrollEnd,

最后偶尔还会滚动下onScroll,这个有时间不出来,我觉得跟有抖动一样

Android执行顺序

滑动一次

1401554-fbd1488dfbc69cb8.png

1
2
3
4
5
6
7
scrollview-android滑动一次的结果,页面意识滚动了一页。

少了个触摸结束`onTouchEnd`,`onResponderGrant`、`onResponderRelease`,这三个(为啥?目前我还不清楚),

直接就是`触摸开始-->移动-->开始拖拽-->滚动-->拖拽结束(手指离开了)-->一帧滚动开始-->滚动-->一帧滚动结束-->滚动`,

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

滑动两次或者多次

1401554-61e9fdebea62fd90.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
scrollview-android滑动2次的结果,滑动了两次。

在拖拽开始`onScrollBeginDrag`和拖拽结束`onScrollEndDrag`之间没有了滚动`onScroll`

然后一帧滚动的开始onMomentumScrollBegin;

然后竟然出发了开始收拾操作的方法onResponderGrant;

再次触发触摸开始:onTouchStart;

然后再一次的拖拽开始onScrollBeginDrag和拖拽结束onScrollEndDrag,中间有了onscroll,可能是滚动变慢了,手指离开了,就有了onScroll;

最后是一帧滚动的结束onMomentumScrollEnd,

这里没有onScroll。

这里的view是滚动了两页也就是从1-2,然后从2-3,最后停在了第三页,也就是一帧开始和结束之间可能存在2-3次的滑动,也就是可能会出现view切换了2-3页面,根据你的滑动的速度和手机的处理能力了。

转自文章

CATALOG
  1. 1. ReactNative的scrollview触摸滚动事件
    1. 1.0.1. 已知的滑动或者滑动开始结束的方法
    2. 1.0.2. 触摸事件里面有携带event
    3. 1.0.3. IOS执行顺序
    4. 1.0.4. Android执行顺序
      1. 1.0.4.1. 滑动一次
      2. 1.0.4.2. 滑动两次或者多次