react组件更新swiper

若是swiper渲染出来的数据不是写死的,那么就会涉及到swiper的更新,javascript

那么咱们在new 出 swiper 实例的时候,就须要把这个实例添加到组件里面去,在更新的或卸载的时候就能够直接使用 swiper的api了java

  componentDidMount(){
    this.swiper =  new Swiper('.swiper-container', {
      // loop: true,
      centeredSlides: true,              //居中展现                        
      spaceBetween:2,           //间距2
      slidesPerView:'auto',            //显示多少个
      autoHeight: true,
      pagination : {
          el: '.swiper-pagination',
          bulletElement : 'div',
          bulletClass : 'my-bullet',
          bulletActiveClass: 'my-bullet-active',
      }
    });
  }

  componentDidUpdate(){
    this.swiper.update();
  }

  componentWillUnmount(){
    if(this.swiper){
      this.swiper.destroy();
    }
  }
相关文章
相关标签/搜索