總結：

• 一板辽、版本異同的注意事項
• 二巷挥、滑動切換使用slideChangeTransitionEnd有時不觸發(fā)
• 三桩卵、進入頁面就滑動到某一屏
  [TOC]

其他總結陸續(xù)更新中...

一、版本異同的注意事項

不同項目中都引用了輪播插件倍宾，版本號不同雏节，發(fā)現(xiàn)有些細微之處需要注意，記錄高职，以防下次踩坑钩乍。
以版本^3.1.3與 ^4.1.0為例

1、引用方式有差別

// vue-awesome-swiper ^3.1.3 樣式引用方式
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

// vue-awesome-swiper ^4.1.0 樣式引用方式
import 'swiper/css/swiper.css' 
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

// swiper ^6.3.5 樣式引用方式
import 'swiper/swiper-bundle.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

// vue-awesome-swiper ^4.1.1  swiper ^7.2.0 引用方式
import 'swiper/swiper-bundle.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// 這兩行的引用是解決輪播分頁器下方小圓點不顯示的問題
import Swiper2, {Navigation, Pagination} from 'swiper';
Swiper2.use([Navigation, Pagination]);

注意：
1怔锌、3.0版本引用組件swiper和swiperSlide 首字母是小寫寥粹，4.0是大寫。且css引用方式路徑不一樣埃元。
2涝涤、高版本若遇到按照官方配置但是還是出現(xiàn)小圓點不顯示的問題，可以加上以下引用
import Swiper2, {Navigation, Pagination} from 'swiper';
Swiper2.use([Navigation, Pagination]);

2岛杀、swiper配置項下標不一樣

 swiperOption: {
   loop: true,
   on: {
      slideChangeTransitionEnd: () => {
         // ^3.1.3 版本
         let swiper = this.$refs.mySwiper.swiper
         let i = swiper.activeIndex // swiper.activeIndex妄痪，下標從0開始
         let info = this.carList[i]

         // ^4.1.0 版本
         let swiper = this.$refs.mySwiper.swiperInstance // 需要獲取swiperInstance
         let i = swiper.activeIndex - 1 // swiper.activeIndex，下標從1開始
         i = this.carList.length == i ? 0 : (i == -1 ? this.carList.length - 1 : i)
         let info = this.carList[i]
      }
     },
  }

注意：3.0版本activeIndex 下標從0開始楞件，4.0版本從1開始衫生。

二裳瘪、滑動切換使用slideChangeTransitionEnd有時不觸發(fā)

用原生的slideChange 替換 slideChangeTransitionEnd 就可以了。

swiperOption: {
   slidesPerView: "auto",
   centeredSlides: true,
   // spaceBetween: 10,
   // lazy: {
     // loadPrevNext: true
   // },
   // watchSlidesVisibility: true,
   // loadOnTransitionStart: true,
   on: {
     // 監(jiān)聽滑動切換事件罪针，返回swiper對象
     slideChange: () => {
       let swiper = this.$refs.mySwiper.$swiper;
       let i = swiper.activeIndex;
       this.changeData(i);
     }
   }
 }

三彭羹、進入頁面就滑動到某一屏

 setTimeout(() => {
     this.$refs.mySwiper.$swiper.slideTo(_idx, 1000, true)
 }, 800)