React Native之ScrollView判断滚动方向

最新推荐文章于 2024-04-29 00:32:49 发布

举世武双

最新推荐文章于 2024-04-29 00:32:49 发布

阅读量5.5k

点赞数 3

分类专栏： React-Native 我的React Native进阶之路文章标签： react-native ScrollView

本文链接：https://blog.csdn.net/qq_33721382/article/details/87874886

版权

本文介绍了如何在React Native的ScrollView组件中判断滚动方向。通过监听onScrollBeginDrag和onScroll事件，比较不同时间点的contentOffset.y值来确定是上滑还是下滑。

摘要由CSDN通过智能技术生成

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轴偏移量，通过这个变量可以判断滚动方向
    scrollViewScrol