Определите индекс с помощью нескольких экземпляров swiper - PullRequest
Новая
       46

Определите индекс с помощью нескольких экземпляров swiper

0 голосов
/ 14 июля 2020

Я использую swiper js для отображения строк данных на моей странице, которая является приложением для реагирования. Каждая строка представляет собой экземпляр Swiper. Если я пролистываю определенную строку, как мне узнать, в каком индексе 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));

1 Ответ

0 голосов
/ 16 июля 2020

На основе документации API swiper js, событие reachEnd принимает в качестве аргумента экземпляр swiper. Это текущий swiper, к которому вы в данный момент обращаетесь. 

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