CODEWITHSUNDEEP
react-native
CoderLim
CoderLim

Reputation: 1232

how to show current page num of paging scrollView?

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: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
    });
}

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.

Upvotes: 5

Views: 4034

Answers (2)

Filip Savic
Filip Savic

Reputation: 3248

Just a tip for those using pagingEnabled.

You can use onMomentumScrollEnd, which fires only when the scroll element has 'snapped' into position

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

Upvotes: 5

Sam
Sam

Reputation: 73

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

Will solve your issue.

Upvotes: 7

Related Questions