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

  

相关文章:

  • 2022-12-23
  • 2021-07-06
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-09-25
  • 2022-12-23
  • 2022-12-23
  • 2021-10-02
  • 2022-12-23
相关资源
相似解决方案