>我有一个看起来像这样的FlastList:
<FlatList
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
data={[ {key:"A"}, {key:"B"} ]}
renderItem={ ({item, index}) => <MyComponent /> }
/>
我有组件集的宽度,以便一次只在屏幕上显示一个页面。如何确定当前页面是什么(或者,当前显示的组件(?
我用像你这样的VirtualizedList
构建了一个组件,启用了分页。我使用 ScrollView 的 onMomentumScrollEnd
处理程序根据 contentOffset 确定当前页面。当用户在页面之间轻扫后滚动动画停止时,将调用onMomentumScrollEnd
处理程序。它有一个事件对象,类似于标准onScroll
事件。您可以使用nativeEvent.contentOffset.x
来确定您位于哪个页面,如下所示:
class Example extends React.Component {
onScrollEnd(e) {
let contentOffset = e.nativeEvent.contentOffset;
let viewSize = e.nativeEvent.layoutMeasurement;
// Divide the horizontal offset by the width of the view to see which page is visible
let pageNum = Math.floor(contentOffset.x / viewSize.width);
console.log('scrolled to page ', pageNum);
}
render() {
return
<VirtualizedList
horizontal
pagingEnabled
onMomentumScrollEnd={this.onScrollEnd} />
}
}
为了节省空间,我留下了其他VirtualizedList
道具。FlatList
组件建立在 VirtualizedList
上,因此该示例应该适合您。
您可以使用 onMomentumScrollEnd of Flatlist 来检测页面更改事件。
并根据移动dimensions_width和列表项目大小,使用以下公式计算页码。
let onScrollEnd = (e) => {
let pageNumber = Math.min(Math.max(Math.floor(e.nativeEvent.contentOffset.x / dimensions_width + 0.5) + 1, 0), listItems.length);
console.log(pageNumber);
}
<FlatList
pagingEnabled
horizontal
onMomentumScrollEnd={onScrollEnd}
data={listItems}
renderItem={ ({item, index}) => <MyComponent /> }
/>