RN 横向滚动固定宽度
主要参数 snapToAlignment ,snapToInterval 配合使用即可
<ScrollView
pagingEnabled={true}
onMomentumScrollEnd={(e) => {
this.onAnimationEnd(e.nativeEvent.contentOffset.x);
}}
snapToAlignment={0,300,300}
snapToInterval={300}
scrollTo={{x: 270, y: 0, animated: true}}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
horizontal={true}>
{walletList.map((item, index) => {
return (
<View> tab cate name </View>
);
})}
</ScrollView>
onAnimationEnd(offsetX) {
console.log(offsetX);
let {walletList, page} = this.state;
let pageIndex = Math.ceil(offsetX / this.state.screenWidth);
if (page < pageIndex) {
//右滑
page++;
this.setState({
walletItem: walletList[pageIndex],
page,
});
} else if (page > pageIndex) {
page--;
// 左划
this.setState({
walletItem: walletList[pageIndex],
page,
});
} else {
this.setState({
walletItem: walletList[pageIndex],
});
}
}