React native确定用户是否在屏幕顶部
React native determine if user is at the top of the screen
在web中的javascript中,我会这样做,以确定用户是否在可滚动页面/文档的顶部:
$(document).scroll(function() {
if($(window).scrollTop() === 0) {
//do stuff
}
});
在React Native中是否有类似的东西可以帮助我确定用户是否在屏幕的顶部?
使用ScrollView
,您可以这样做:
_handleScroll(event) {
if(event.nativeEvent.contentOffset.y <= 0) {
console.log('top!');
}
}
render() {
return (
<View style={styles.container}>
<ScrollView
onScroll={this._handleScroll}
onScrollAnimationEnd={this._handleScroll}
style={{flex: 1}}>
<View style={[styles.child, {backgroundColor: 'red'}]} />
<View style={[styles.child, {backgroundColor: 'orange'}]} />
<View style={[styles.child, {backgroundColor: 'green'}]} />
</ScrollView>
</View>
);
}
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
child: {
flex: 1,
height: 400,
}
});
希望有帮助!
是ScrollView组件有onScroll方法。pageX和pageY属性
evt
nativeEvent
contentOffset
x
y
handleScroll(event) {
console.log(event.nativeEvent.contentOffset.y)
},
<ScrollView onScroll={this.handleScroll}/>
相关文章:
- 当带有渲染器的DOM元素不在屏幕顶部时,移动了场景的坐标
- 在不使用 CSS 的情况下,将元素与浏览器屏幕顶部保持设定的距离
- 当到达屏幕顶部时,jquery/css转换
- Tizen可穿戴设备屏幕顶部的Javascript触摸事件
- 无限滚动可在快速滚动时跳转到屏幕顶部
- JQuery Animate 函数在制作动画之前跳到屏幕顶部
- 在屏幕顶部附近滚动元素时触发的侦听器
- 如何在移动浏览器的屏幕顶部显示自定义警报
- 如何在屏幕顶部显示工具提示
- 当用户不进行交互时,如何使图像返回到屏幕顶部
- 在屏幕顶部时更改菜单背景颜色
- 在滚动期间在屏幕顶部获取文本
- 将用户重定向到屏幕顶部(智能手机)
- 多页表单没有加载到屏幕顶部
- 显示/隐藏元素-移动到屏幕顶部
- 停止'跳跃'当导航条固定在屏幕顶部时
- Div在屏幕顶部增长,一旦滚动就会缩小
- . scrolltop添加到屏幕顶部带有固定横幅的元素
- 相当于window.屏幕顶部在firefox和chrome
- React native确定用户是否在屏幕顶部