版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33721382/article/details/87874886
2019-02-22
1、在一个onScrollBeginDrag回调方法(ScrollView开始拖动开始时触发)中记录event.nativeEvent.contentOffset.y:Y轴滚动的偏移量。
2、在onScroll滚动事件回调方法中判断当前contentOffset.y与记录的Y轴滚动的偏移量:
(1)若记录的Y轴滚动的偏移量 < 当前contentOffset.y,则表示ScrollView在往下滚动。
(2)若记录的Y轴滚动的偏移量 > 当前contentOffset.y,则表示ScrollView在往上滚动。
样例代码
'use strict';
import React, {Component} from 'react';
import {
Text,
View,
ScrollView,
} from 'react-native';
const SCROLLVIEW_DIRECTION_UP = 0; //表示ScrollView组件往上滚动
const SCROLLVIEW_DIRECTION_DOWN = 1; //表示ScrollView组件往下滚动
/**
* 2019-02-22
* chenlw
* ScrollView判断滚动方向
*/
export default class ScrollViewPanResponderExample_2 extends Component {
scrollViewStartOffsetY = 0; //用于记录手指开始滑动时ScrollView组件的Y轴偏移量,通过这个变量可以判断滚动方向
scrollViewScrollDirection = 0; //ScrollView组件滚动的方向:0往上;1往下
static navigationOptions = ({navigation, screenProps}) => {
return ({
title: 'ScrollView判断滚动方向',
});
};
constructor(props) {
super(props);
this.state = {
scrollViewScrollDirection: '', //ScrollView组件滚动的方向
}
}
/**
* 滑动开始回调事件
*
* 注意:当刚刚开始滑动时,event.nativeEvent.contentOffset.y仍然是上次滑动的值,没有变化
*
* @param event
* @private
*/
_onScrollBeginDrag = (event) => {
//event.nativeEvent.contentOffset.y表示Y轴滚动的偏移量
const offsetY = event.nativeEvent.contentOffset.y;
//记录ScrollView开始滚动的Y轴偏移量
this.scrollViewStartOffsetY = offsetY;
};
/**
* ScrollView滑动回调事件
* @param event
* @private
*/
_onScroll = (event) => {
const offsetY = event.nativeEvent.contentOffset.y;
if (this.scrollViewStartOffsetY > offsetY) {
//手势往下滑动,ScrollView组件往上滚动
//console.log('手势往下滑动,ScrollView组件往上滚动');
this.scrollViewScrollDirection = SCROLLVIEW_DIRECTION_UP;
this.setState({
scrollViewScrollDirection: 'ScrollView组件往上滚动'
});
} else if (this.scrollViewStartOffsetY < offsetY) {
//手势往上滑动,ScrollView组件往下滚动
//console.log('手势往上滑动,ScrollView组件往下滚动');
this.scrollViewScrollDirection = SCROLLVIEW_DIRECTION_DOWN;
this.setState({
scrollViewScrollDirection: 'ScrollView组件往下滚动'
});
}
};
/**
* 滑动停止回调事件
* @param event
* @private
*/
_onScrollEndDrag = (event) => {
//console.log('_onScrollEndDrag');
//console.log('Y=' + event.nativeEvent.contentOffset.y);
};
render() {
return (
<View>
<Text>ScrollView滚动方向:{this.state.scrollViewScrollDirection}</Text>
<ScrollView
onScroll={this._onScroll}
onScrollBeginDrag={this._onScrollBeginDrag}
onScrollEndDrag={this._onScrollEndDrag}
scrollEventThrottle={16} //设置16,一帧回调一次这个onScroll方法
>
<Text style={{height: 30, backgroundColor: 'pink'}}>--------1111111---------</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
<Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
</ScrollView>
</View>
)
}
}
扫描二维码关注公众号,回复:
5843795 查看本文章