检测ScrollView已到达终点

Eld*_*ell 31 react-native react-native-scrollview

我有一个Text长文本ScrollView,我想检测用户何时滚动到文本的末尾,所以我可以启用一个按钮.

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

Hen*_*k R 78

我是这样做的:

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

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

const MyCoolScrollViewComponent = ({enableSomeButton}) => (
  <ScrollView
    onScroll={({nativeEvent}) => {
      if (isCloseToBottom(nativeEvent)) {
        enableSomeButton();
      }
    }}
    scrollEventThrottle={400}
  >
    <Text>Here is very long lorem ipsum or something...</Text>
  </ScrollView>
);

export default MyCoolScrollViewComponent;
Run Code Online (Sandbox Code Playgroud)

我想添加,paddingToBottom因为通常不需要将ScrollView滚动到底部直到最后一个像素.但是如果你想将paddingToBottom设置为零.

  • 这对我来说并不“总是”触发。仅当用户滚动时才调用“onScroll”。 (2认同)

Nul*_*ind 13

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

像这样反应原生0.44


Mhd*_*osh 6

在人们的帮助下,我将添加他们编写的简单代码以使其达到最高事件和最低事件,并且我做了一些说明以使事情更简单

布局和变量值

<ScrollView
onScroll={({nativeEvent})=>{
if(isCloseToTop(nativeEvent)){
    //do something
}
if(isCloseToBottom(nativeEvent)){
   //do something
}
}}
>
...contents
</ScrollView>



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



ifCloseToTop({layoutMeasurement, contentOffset, contentSize}){
   return contentOffset.y == 0;
}
Run Code Online (Sandbox Code Playgroud)


Dav*_*vid 5

另一种解决方案可能是使用ListView具有方法的单行(您的文本)onEndReached请参阅此处的文档


dea*_*904 5

对于 Horizo​​ntal ScrollView(例如 Carousels),将isCloseToBottom函数替换为isCloseToRight

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


小智 5

@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;
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述


小智 5

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


 <ScrollView
    onMomentumScrollEnd={({ nativeEvent }) => {
      if (isCloseToBottom(nativeEvent)) {
        loadMoreData()
      }
    }}
    scrollEventThrottle={1}
  >
Run Code Online (Sandbox Code Playgroud)

上面的答案是正确的,但要在滚动视图结束时回调使用onMomentumScrollEnd而不是onScroll