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设置为零.
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
在人们的帮助下,我将添加他们编写的简单代码以使其达到最高事件和最低事件,并且我做了一些说明以使事情更简单
<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)
对于 Horizontal 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
归档时间: |
|
查看次数: |
26865 次 |
最近记录: |