javascript - Lodash 查找范围而不是数字的精确匹配

标签 javascript reactjs react-native

我正在 react-native 中实现一个系统,我在其中使用 onScroll 处理程序来检测距视口(viewport)顶部的 Y 偏移量。当当前滚动位置等于存储在单独对象中的数字时,必须对其进行检测。

现在这是我的代码:

onActivitiesScroll = (event) => {
    let positionYTrack = _.find(
        this.state.trackHeaderCardPositionsY,
        { positionY: Math.floor(event.nativeEvent.contentOffset.y) }
    );

    console.log(positionYTrack);
}

问题出在这部分:{ positionY: Math.floor(event.nativeEvent.contentOffset.y) }

event.nativeEvent.contentOffset.y 是一个精确的数字(floored),positionY 是状态对象中的一个属性。问题是当我滚动时,由于 onScroll 处理程序处理的帧数有限,它会跳过许多滚动位置。

这段代码现在正在做的是:

如果 Math.floor(event.nativeEvent.contentOffset.y) 完全等于状态中的 positionY 属性值之一,它应该记录它。我想这样做:

如果 Math.floor(event.nativeEvent.contentOffset.y) 在当前位置 - 10 和当前位置 + 10 的范围内,它应该检测到它。

知道如何实现吗?我似乎无法为此找到解决方案,即使在睡过头之后也是如此。

最佳答案

_.find 也接受一个比较值的函数。这是一个简单的示例,您可以使用它来查找 y 是否在范围内:

onActivitiesScroll = (event) => {
    let positionYTrack = _.find(
        this.state.trackHeaderCardPositionsY,
        position => {
            const y = Math.floor(event.nativeEvent.contentOffset.y);
            const min = y - 10;
            const max = y + 10;
            return min >= position <= max;
        }
    );
}

关于javascript - Lodash 查找范围而不是数字的精确匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49197697/

相关文章:

javascript - 在 Gatsby 站点中集成 Drift 聊天服务

react-native - 将 Enzyme 与 React Native 一起使用时的错误(导入字形图)

javascript - 如何使用 <audio> 标签在 IE 中自动播放

javascript - polymer 以声明方式将监听器附加到组件

javascript - WordPress 4.5.2 : Uncaught ReferenceError: JQuery is not defined

reactjs - 依赖项与安装的expo包版本不兼容,找不到模块 'nocache'

react-native - redux-persist/createPersistoid : error serializing state TypeError: Converting circular structure to JSON

javascript - 如何从 Javascript 生成 Vue 组件

reactjs - 带有Express服务器的Next.js如何调用自定义错误页面?

javascript - 无法访问模块函数中的 quill 实例