鍍金池/ 問(wèn)答/HTML5  HTML/ 在React中引用了swiper.js,如何解決swiper渲染慢,且頁(yè)面切換后

在React中引用了swiper.js,如何解決swiper渲染慢,且頁(yè)面切換后swiper變卡頓的問(wèn)題?

目前我在用React寫(xiě)移動(dòng)端頁(yè)面,有一個(gè)頁(yè)面引用了Swiper@4.2.2版本。頁(yè)面之間進(jìn)行路由切換時(shí),Swiper就渲染得特別慢。而且,頁(yè)面切換幾次之后,swiper就變得卡頓。

我是這樣使用swiper的:

new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination"
  },
  initialSlide: swiperIndex,//設(shè)定初始化時(shí)slide的索引
  watchOverflow: true,
  observer: true, //修改swiper自己或子元素時(shí),自動(dòng)初始化swiper
  observeParents: true, //修改swiper的父元素時(shí),自動(dòng)初始化swiper
  on: {
    slideChangeTransitionStart: function(event) {
      matchIndex=this.activeIndex;
      
    }
  }
});
回答
編輯回答
久不遇

組件生命周期結(jié)束函數(shù)里銷(xiāo)毀創(chuàng)建的Swiper實(shí)例
創(chuàng)建Swpier時(shí)用ref屬性來(lái)指定Swiper容器,不用className

2017年4月28日 18:39