vue使用vue-awesome-swiper

需求很简单，就是一个简单的图片轮播，本来想直接使用swiper，结果网上搜了下，在vue中使用的基本上都是vue-awesome-swiper，于是就开始了一系列的坑。中间过程不多介绍，直接说结果吧。

最好使用稳定版本 vue-awesome-swiper3.1.3，这样会让你少走坑。希望对你有帮助

1、安装

npm install vue-awesome-swiper3.1.3 --save

2、引入

全局引入 缺一不可
import Vue from 'vue';

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

3、代码部分

 <swiper  :options="swiperOption" ref="swiperLogin"  >
        <swiper-slide v-for="(item,index) in carouselList" :key="index" >
              <img :src="item.path" style="width:100%;height:100%" alt=""/>
          </swiper-slide>
   </swiper>

    data(){
            return {
                carouselList: [   //图片
                    {path: require('../assets/one.jpg')},
                    {path: require('../assets/two.jpg')},
                    {path: require('../assets/three.jpg')},
                    {path: require('../assets/four.jpg')},
                    {path: require('../assets/six.jpg')},
                    {path: require('../assets/seven.jpg')},
                    {path: require('../assets/eight.jpg')},
                    {path: require('../assets/night.jpg')},
                    {path: require('../assets/ten.jpg')}
                ],
             }
      }       

4、配置项
配置项这个过程，遇到了一种现象，就是初始化时不进行轮播，只有改变窗口大小的时候才会开始轮播， 可下面是正确的配置方式 ，即可解决

data(){
	return{
		swiperOption: {
                 initialSlide: 0,
                 loop: true,
                 speed: 400,
                 autoplay: {
                     delay: 3000,
                     disableOnInteraction: false
                 },
                 // grabCursor: true,
                 setWrapperSize: true,
                 autoHeight: true,
                 uniqueNavElements: true,
                 preventInteractionOnTransition: false,
                 allowSilderPrev: true,
                 allowSilderNext: true,
                 //   scrollbar:'.swiper-scrollbar',//滚动条
                 mousewheelControl: true,
                 observer: true,
                 observeParents: true,
                 debugger: true,
          }
	}
}

5、swiper对象

 computed: {
        swiper() {
             return this.$refs.swiperLogin.swiper
         }
     },