使用多个 swiper 实例确定索引

Question

我正在使用 swiperjs 在我的页面上显示数据行，这是一个 React 应用程序。每行都是一个滑动器实例。如果我在特定行上滑动，我如何知道我目前处于哪个滑动器索引？有没有办法找出特定行的滑动开始时间？

    constructor(props) {
        super(props);
    }
    
    componentDidMount() {
     this.buildSwiper();
  }
  
    // Initialize the swiper component.
    buildSwiper() {
     this.swiper = new Swiper('.swiper-container', {
      slidesPerView: auto,
      freeMode: true,
      freeModeSticky: true,
      simulateTouch: true,
      on: {
        reachEnd: this.onReachEnd
      },
    });
  }
  
  onReachEnd() {
    // **Need help here: I want to append the slide only on the correct row I am swiping at.**
     this.swiper.forEach(swiper => 
        swiper.appendSlide('<div class="swiper-slide">Slide 10</div>')
      )
  }
  
  renderDepartments(dept) {
    <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className="swiper-slide" key={dept.id}>
            {dept.name}
          </div>
        </div>
      </div>
  }
  
  render() {
    const { departments } = this.props;
    return (
        <div>{departments && departments.map(dept => this.renderDepartments(dept))}</div>
    );
  }

};

export default connect(mapStateToProps, mapDispatchToProps)(injectSheet(styles)(Department));

Answer 1

根据 swiperjs API 文档，reachEnd 事件接受 swiper 实例作为参数。也就是您当前访问的当前刷卡器。

onReachEnd(swiper) {
  swiper.appendSlide('<div class="swiper-slide">Slide 10</div>')
}

使用多个 swiper 实例确定索引

Determine the index with multiple swiper instances

reactjs

swiperjs