Question

我已经对我的react应用实现了“滑动”，其目的是基于用户滑动（向左和向右）呈现。我已经实现了一个解决方案（如下），并在Chrome移动视图中尝试过，当我“滑动”它时，我可以在下一张幻灯片中拖动，但是不能一直拖动，而当我放下它时，它会在第一张幻灯片中重置。

我的代码：

  return (
     <div className={styles["slider"]}>

     <Swipe
    onSwipeLeft = {this.goToNextSlide}
    onSwipeRight = {this.goToNextSlide} >

        <div className={styles["sliderWrapper"]} style={{ transform: `translateX(${this.state.translateValue}px)`, transition: 'transform ease-out 0.45s'}}> {
          this.state.newsItems.map((item, i) => (this.renderSlide(item, i)))}          
        </div> 

     </Swipe>

     <LeftArrow goToPrevSlide={this.goToPrevSlide}/>
    <RightArrow goToNextSlide={this.goToNextSlide}/>

      </div>
    );
  }

在上面我已经声明了将触发功能的滑动：

public goToPrevSlide = () => {
    if(this.state.currentIndex === 0){

      return this.setState({
        currentIndex: 0,
        translateValue: 0
      });
    }
    else
    {  
      this.setState({
        currentIndex: this.state.currentIndex - 1,
        translateValue: this.state.translateValue + (this.slideWidth()) 
      });
    }
  }

  public goToNextSlide = () => {
    if(this.state.currentIndex === this.state.newsItems.length - 1) {
      return this.setState({
        currentIndex: 0,
        translateValue: 0
      });
    }

  public slideWidth = () => {
    return document.querySelector('.slideWidth').clientWidth;
  }

“ renderSlide”是带有幻灯片html的函数。我还声明了可以使用的按钮（左右箭头）。但是由于我上面提到的原因，它不起作用。我无法滑到下一个，只能从其中拖出一点才能看到它的一部分，但是并不能一直滑下去，当我单击并单击时会重置。

反应刷卡不变

0 个答案: