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

问题描述

滚动视图:

<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:this method calc what current page num is

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

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

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

I think the codeline is ok, but when I pan the scrollView to next page, it will scroll back. once I remove the codeline in _onScroll, the question can be solved, but I can't calc current page num.

推荐答案

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

将解决您的问题.

这篇关于如何显示分页scrollView的当前页码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！