react组件更新swiper

佚名 7年前 (2019-04-11) 随笔 1016人围观抢沙发百度已收录

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

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

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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