react组件更新swiper

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

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

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