检测ScrollView已到达终点

Question

我在Text中有一个带有长文本的ScrollView，我想检测用户何时滚动到文本的末尾，以便启用按钮。

我一直在调试onScroll事件中的事件对象，但似乎没有任何价值我可以使用。

Answer 1

我是这样做的：

paddingToBottom

我想添加def fillNaNs_numpy(a, b): cm = a.cumprod() bm = ~np.isnan(b) a1 = np.append(1, cm[:-1]) offset = b[bm] / a1[bm] out = a1 * offset[bm.cumsum()-1] return out ，因为通常不需要将ScrollView滚动到底部直到最后一个像素。但是如果你想将paddingToBottom设置为零。

Answer 2

<... onScroll={(e) => {
        let paddingToBottom = 10;
        paddingToBottom += e.nativeEvent.layoutMeasurement.height;
        if(e.nativeEvent.contentOffset.y >= e.nativeEvent.contentSize.height - paddingToBottom) {
          // make something...
        }
      }}>...

像这样反应原生0.44

Answer 3

另一种解决方案可能是使用ListView一行（您的文字），其中onEndReached方法。请参阅文档here

Answer 4

在人们的帮助下，我将添加他们编写的简单代码以使事件到达顶部和事件到达底部，并且我做了一些说明以使事情更简单

@ViewChild

Answer 5

对于水平ScrollView（例如轮播），将isCloseToBottom函数替换为isCloseToRight

isCloseToRight = ({ layoutMeasurement, contentOffset, contentSize }) => {
    const paddingToRight = 20;
    return layoutMeasurement.width + contentOffset.x >= contentSize.width - paddingToRight;
};

Answer 6

@Henrik R的权利。 但是您也应该使用Math.ceil（）。

function handleInfinityScroll(event) {
        let mHeight = event.nativeEvent.layoutMeasurement.height;
        let cSize = event.nativeEvent.contentSize.height;
        let Y = event.nativeEvent.contentOffset.y;

        if(Math.ceil(mHeight + Y) >= cSize) return true;
        return false;
}

Answer 7

作为Henrik R的答案的补充：

如果您还需要知道用户在安装时是否已到达内容结尾（如果内容可能会或可能不会太长，具体取决于设备大小）-这是我的解决方案：

<ScrollView 
        onLayout={this.onLayoutScrollView}
        onScroll={this.onScroll}>
    <View onLayout={this.onLayoutScrollContent}>
        {/*...*/}
    </View>
</ScrollView>

结合

onLayout(wrapper, { nativeEvent }) {
    if (wrapper) {
        this.setState({
            wrapperHeight: nativeEvent.layout.height,
        });
    } else {
        this.setState({
            contentHeight: nativeEvent.layout.height,
            isCloseToBottom:
              this.state.wrapperHeight - nativeEvent.layout.height >= 0,
        });
    }
}

Answer 8

我使用 ScrollView，这对我有用

这是我的解决方案：

我将 onMomentumScrollEnd 属性传递给了 scrollView 并在 event.nativeEvent 的基础上在 ScrollView 中实现了 onEndReached 功能

 onMomentumScrollEnd={(event) => { 
          if (isCloseToBottom(event.nativeEvent)) {
            LoadMoreRandomData()
          }
         }
       }}

  const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
const paddingToBottom = 20;
return layoutMeasurement.height + contentOffset.y >=
  contentSize.height - paddingToBottom;

};

Answer 9

const isCloseToBottom = async ({ layoutMeasurement, contentOffset, contentSize }) => {
const paddingToBottom = 120
return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom}


 <ScrollView
    onMomentumScrollEnd={({ nativeEvent }) => {
      if (isCloseToBottom(nativeEvent)) {
        loadMoreData()
      }
    }}
    scrollEventThrottle={1}
  >

以上答案是正确的，但要在 scrollView 到达终点时回调 使用 onMomentumScrollEnd 而不是 onScroll