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],
      });
    }
  }
posted @ 2022-12-31 18:12  Bashuslovakia  阅读(132)  评论(0编辑  收藏  举报