时间戳

首页 > 解决方案 > 确定具有多个 swiper 实例的索引

reactjs - 确定具有多个 swiper 实例的索引

问题描述

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

    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));

标签： reactjsswiperjs

解决方案

基于 swiperjs API 文档，reachEnd事件接受swiper实例作为参数。那是您当前正在访问的当前刷卡器。

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

推荐阅读