Question

我使用deck swiper来显示数据。现在，我想按一个按钮查看下一张卡，而不是滑动查看下一张卡。

在Methods中注意，有jumpToCardIndex()，但我正在尝试实施GoToNextCard()。（因为我不知道我试图呼叫cardIndex的当前GoToNextCard()，所以我无法使用jumpToCardIndex()）

我使用相同的jumpToCardIndex()，但如果我没有通过索引，我希望它只是转到下一张卡片。所以我这样做了：

  jumpToCardIndex = newCardIndex => 
  {
      if(newCardIndex) // if parameter exist, do old stuff
      {
          if (this.props.cards[newCardIndex]) {
              this.setCardIndex(newCardIndex, false);}
      }
      else
      {
          // else just incremenet
          this.incrementCardIndex()
      }
  };

如果我跳过闪光灯的最后一张卡片，上面的作品会崩溃。

这是这方面的主要功能：

  incrementCardIndex = onSwiped => {
    const { firstCardIndex } = this.state;
    let newCardIndex = firstCardIndex + 1;
    let swipedAllCards = false;

    if (newCardIndex === this.props.cards.length) {
      newCardIndex = 0;
      swipedAllCards = true;
    }

    this.onSwipedCallbacks(onSwiped, swipedAllCards);
    this.setCardIndex(newCardIndex, swipedAllCards);
  };

  onSwipedCallbacks = (swipeDirectionCallback, swipedAllCards) => {
    let previousCardIndex = this.state.firstCardIndex;
    this.props.onSwiped(previousCardIndex);

    swipeDirectionCallback(previousCardIndex);
    if (swipedAllCards) {
      this.props.onSwipedAll();
    }
  };

  setCardIndex = (newCardIndex, swipedAllCards) => {
    this.setState(
      {
        firstCardIndex: newCardIndex,
        secondCardIndex: this.calculateSecondCardIndex(newCardIndex),
        previousCardIndex: this.calculatePreviousCardIndex(newCardIndex),
        swipedAllCards: swipedAllCards,
        panResponderLocked: false
      },
      this.resetPanAndScale
    );
  };

Answer 1

您是否直接在Swiper组件中修改了库？如果是这样，您可以检查索引是否小于可用卡的长度并跳转到该索引（如果存在）：

  jumpToCardIndex = newCardIndex => 
  {
      if(newCardIndex) // if parameter exist, do old stuff
      {
          if (this.props.cards[newCardIndex]) {
              this.setCardIndex(newCardIndex, false);}
      }
      else
      {
          if (newCardIndex < this.state.cards.length) {
          // else just incremenet if index isn't greater than length of cards
            this.incrementCardIndex()
          }
      }
  };

此外，如果添加对组件的引用并获取currentIndex并运行正常的jumpToCardIndex（currentIndex +1）并且只检查该索引是否小于，则可以在Swiper组件库文件之外执行此操作。卡的长度。

如何使用按钮而不是滑动来查看下一个？

1 个答案: