1、render部分
onScroll
在滚动的过程中,每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle
属性来控制,数字越大,跟踪滚动位置的代码的准确性就越高
render() {
return (
<View style={styles.container}>
{this.renderNavBar()}
<ScrollView
ref={view => {
this.ScrollView = view;
}}
horizontal
style={styles.wrapper}
showsHorizontalScrollIndicator={false}
pagingEnabled
onMomentumScrollEnd={event => this.scrollEnd(event)}
>
<QuotationList data={marketStockReqData} />
<QuotationList data={userStockReqData} />
</ScrollView>
</View>
);
}
2、scrollEnd计算offset偏移量
scrollEnd = event => {
const offsetX = event.nativeEvent.contentOffset.x;
const currentPage = Math.floor(offsetX / screenW);
this.setState({
tabIndex: currentPage
});
};
3、点击segement时滚动到对应offset
onMarketStockTab = () => {
this.ScrollView.scrollTo({ x: 0, y: 0, animated: true });
this.setState({
tabIndex: 0
});
};
onUserStockTab = () => {
this.ScrollView.scrollTo({ x: screenW, y: 0, animated: true });
this.setState({
tabIndex: 1
});
};