首页 > 其他分享 >RN 横向滚动固定宽度

RN 横向滚动固定宽度

时间:2022-12-31 18:23:40浏览次数:39  
标签:pageIndex 滚动 300 offsetX 横向 walletList RN page setState

主要参数 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],
      });
    }
  }

标签:pageIndex,滚动,300,offsetX,横向,walletList,RN,page,setState
From: https://www.cnblogs.com/ianlab/p/17017075.html

相关文章