怎样判断ReactNative ScrollView滚到底了

1,022 阅读1分钟

在React Native中,你可以使用 ScrollViewonScroll 事件来监听滚动事件,然后通过事件参数 nativeEvent 来获取当前滚动的位置。

下面是一个如何判断滚动条是否滚到底部的示例代码:

import React, { useRef } from 'react';
import { ScrollView } from 'react-native';

const MyComponent = () => {
  const scrollRef = useRef();

  const handleScroll = (event) => {
    // 获取当前滚动的位置
    const scrollPosition = event.nativeEvent.contentOffset.y;
    // 获取ScrollView的总高度
    const scrollViewHeight = event.nativeEvent.layoutMeasurement.height;
    // 获取内容的总高度
    const contentHeight = event.nativeEvent.contentSize.height;

    // 判断是否滚动到底部
    if (scrollPosition + scrollViewHeight >= contentHeight) {
      console.log('已经滚动到底部了');
    }
  }

  return (
    <ScrollView
      ref={scrollRef}
      onScroll={handleScroll}
    >
      {/* 你的内容 */}
    </ScrollView>
  );
}

上述代码会监听ScrollView的滚动事件,并计算滚动位置以及内容的总高度,当滚动的位置与ScrollView的高度之和大于等于内容的总高度时,我们可以认为已经滚动到底部了。

注意:这个例子中的判断标准是相等或者大于内容总高度,根据你的具体需求,这个判断标准可能需要调整。例如,如果你想要在滚动到距离底部一定距离的时候进行预加载,那么你可能需要在判断条件中添加这个距离。