轮播插件vue-awesome-swiper总结

总结：

一、版本异同的注意事项
二、滑动切换使用slideChangeTransitionEnd有时不触发
三、进入页面就滑动到某一屏
[TOC]

其他总结陆续更新中...

一、版本异同的注意事项

不同项目中都引用了轮播插件，版本号不同，发现有些细微之处需要注意，记录，以防下次踩坑。
以版本^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、高版本若遇到按照官方配置但是还是出现小圆点不显示的问题，可以加上以下引用
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有时不触发

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

swiperOption: {
   slidesPerView: "auto",
   centeredSlides: true,
   // spaceBetween: 10,
   // lazy: {
     // loadPrevNext: true
   // },
   // watchSlidesVisibility: true,
   // loadOnTransitionStart: true,
   on: {
     // 监听滑动切换事件，返回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)

最后编辑于：2023.04.13 14:35:46