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();
    }
  }
相關文章
相關標籤/搜索