如何显示分页scrollView的当前页码？

Question

滚动视图：

<View style={{flex:1}}>
    <ScrollView
        ref={(component) => {this._scrollView = component}}
        scrollEventThrottle={15}
        removeClippedSubviews={true}
        pagingEnabled={true}
        horizontal={true}
        onScroll={this._onScroll.bind(this)}>
        {items}
   </ScrollView>
   <Text style={styles.legend}>{this.state.currentPage}/{9}</Text
</View>

_onScroll:这个方法计算当前页号是多少

<View style={{flex:1}}>
    <ScrollView
        ref={(component) => {this._scrollView = component}}
        scrollEventThrottle={15}
        removeClippedSubviews={true}
        pagingEnabled={true}
        horizontal={true}
        onScroll={this._onScroll.bind(this)}>
        {items}
   </ScrollView>
   <Text style={styles.legend}>{this.state.currentPage}/{9}</Text
</View>

我认为代码行没问题，但是当我平移到scrollView下一页时，它会向后滚动。一旦我删除 中的代码行_onScroll，问题就可以解决，但我无法计算当前页码。

Answer 1

Math.round(parseFloat(event.nativeEvent.contentOffset.x/Dimensions.get('window').width));

会解决你的问题。

Answer 2

只是给那些使用pagingEnabled.

您可以使用onMomentumScrollEnd，它仅在滚动元素“捕捉”到位时触发

  <Animated.ScrollView
    horizontal={true}
    pagingEnabled={true}
    showsHorizontalScrollIndicator={false}
    onMomentumScrollEnd={(event) => console.log(event.nativeEvent.contentOffset.x)
  }}