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：此方法计算当前页面数为

_onScroll(e) {
    let newPageNum = parseInt(e.nativeEvent.contentOffset.x/WINDOW_WIDTH+1);

    newPageNum != this.state.currentPage && this.setState({
        currentPage: newPageNum
    });
}

我认为代码行没问题，但是当我将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)
  }}

如何显示分页scrollView的当前页面数量？

2 个答案: