8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

对滚动跳转索引做出反应

ohnoes 1月前

13 0

我正在 React Native 中创建一个带有 on scroll 的 flatlist。我的列表中有 9 个项目,我还使用指示器滚动浏览这 9 个项目。现在,指示器滚动速度很快,完成速度也很快……

我正在 React Native 中创建一个带有 on scroll 的 flatlist。我的列表中有 9 个项目,我还使用指示器滚动浏览这 9 个项目。现在,指示器滚动得很快,在我们到达项目末尾之前就很快完成了。就像当项目位于第 5 位时它到达末尾一样,所以它不一致。我希望它能够一致地逐个项目滚动。

下面是我的代码:viewModel.ts:

 @observable currentIndex: number = 0
 actionCardsData = [
    {
      id: "1",
      icon: "coin",
      text: "rewards.exploreHomeReward",
      desciption: "rewards.homeofRewardsDescription",
    },
    {
      id: "2",
      icon: "handIconRewards",
      text: "rewards.guaranteedRewardsTitle",
      desciption: "rewards.guaranteedRewardsDescription",
    },
    {
      id: "3",
      icon: "iconHeartFillRewards",
      text: "rewards.annualBirthdaydRewardsTitle",
      desciption: "rewards.annualBirthdaydRewardsDescription",
    },
    {
      id: "4",
      icon: "buyCartsIconRewards",
      text: "rewards.uberEatsVouchersRewardsTitle",
      desciption: "rewards.uberEatsVouchersRewardsDescription",
    },
    {
      id: "5",
      icon: "benefitsCompetitionsIconRewards",
      text: "rewards.competitionEntriesRewardsTitle",
      desciption: "rewards.competitionEntriesRewardsDescription",
    },
    {
      id: "6",
      icon: "boxOfficeIconRewards",
      text: "rewards.boxOfficeRentalRewardsTitle",
      desciption: "rewards.boxOfficeRentalRewardsDescription",
    },
    {
      id: "7",
      icon: "upgradePackageRewards",
      text: "rewards.packageUpgradesRewardsTitle",
      desciption: "rewards.packageUpgradesRewardsDescription",
    },
    {
      id: "8",
      icon: "newShowmaxIcon",
      text: "rewards.showmaxDiscountsRewardsTitle",
      desciption: "rewards.showmaxDiscountsRewardsDescription",
    },
    {
      id: "9",
      icon: "addMoviesIconsRewards",
      text: "rewards.boxOfficeRentalRewardsTitle",
      desciption: "rewards.movieAddOnDiscountsRewardsDescription",
    },
  ]
 @action.bound
  setCurrentIndex(index: number) {
    this.currentIndex = index
  }

  @action.bound
  updateIndex(contentOffsetX: number, cardWidth: number, spacing: number) {
    let newIndex = Math.round(contentOffsetX / (cardWidth + spacing))
    this.setCurrentIndex(Math.min(newIndex, this.actionCardsData.length - 1))
  }

我的索引.tsx:

const visibleIndicators = (currentIndex) => {
    const maxIndicators =
      viewModel.actionCardsData.length > 9 ? 9 : viewModel.actionCardsData.length
    let start = Math.max(0, currentIndex - Math.floor(maxIndicators / 2))
    const end = Math.min(viewModel.actionCardsData.length, start + maxIndicators)
    start = Math.max(0, end - maxIndicators)
    return Array.from({ length: end - start }, (_, i) => start + i).map(renderIndicator)
  }
  const updateIndex = (event) => {
    const contentOffsetX = event.nativeEvent.contentOffset.x
    viewModel.updateIndex(contentOffsetX, cardWidth, Spacings.Cozy)
    
  }
<FlatList
        data={viewModel.actionCardsData}
        renderItem={renderItem}
        showsHorizontalScrollIndicator={false}
        decelerationRate="fast"
        contentContainerStyle={styles.contentContainer}
        onScroll={updateIndex}
        horizontal
        snapToInterval={cardWidth + Spacings.Roomy}
        ItemSeparatorComponent={() => <View style={{ width: Spacings.Cozy }} />}
      />
      {viewModel.actionCardsData.length > 2 && (
        <View style={styles.indicatorContainer}>{visibleIndicators(viewModel.currentIndex)}</View>
      )}

你能检查一下我做错了什么并提供帮助吗?

帖子版权声明 1、本帖标题:对滚动跳转索引做出反应
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由ohnoes在本站《react-native》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 我设法找到了解决方案。因此,卡片尺寸更大,这意味着指示器滚动条在滚动时会占用项目的间距,这符合我的逻辑。

    因此,我不得不更新间距大小以适应卡片尺寸并滚动整个列表

    const updateIndex = (event) => {const contentOffsetX = event.nativeEvent.contentOffset.xviewModel.updateIndex(contentOffsetX, cardWidth, Spacings.Cozy)//spacing.cozy 等于 24,必须将其增加 180 才能正常工作

    }

返回
作者最近主题: