vue-awesome-swiper的版本

vue-awesome-swiper分了两个版本，一个3.0的，一个4.0的，两个版本的差别都比较大

官网地址

3.1.3

yarn add [email protected]

页面是上引用

  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  components: {
    swiper,
    swiperSlide
  }

基础配置

数据配置

     Option: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        }
      }

修改轮播的点

slidesPerView为auto的计算

涉及到元素的宽高都是固定的，间距也是固定的，至于每一屏要显示多少个，这个可以做动态的计算

    Option: { 
        slidesPerView: 'auto',
        spaceBetween: 30,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        }
      }

特别需要注意的是，每个silder需要固定具体的尺寸大小，才能auto计算每一屏的个数

.single_slider {
  width: 360px;
  height: 398px;
}

最终显示如下效果，也可以去官网看具体的配置效果

示例图

4.0以上

正常来说，3.0其实已经够用了，如果是要用到4.0的版本，那需要注意。4.0中swiper需要单独做安装

yarn add swiper vue-awesome-swiper 

引用组件的方式也不一样

  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'

  components: {
     Swiper,
     SwiperSlide
  }

如果 import 'swiper/css/swiper.css'这句话报错的话，需要引入的是另外一个css

 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'

  components: {
     Swiper,
     SwiperSlide
  }

页面上的使用方式跟3.0的每什么区别，配置也一样。有个问题是轮播的点不知道为什么没显示出来。