Vue如何使用vue-awesome-swiper实现轮播效果

        在Vue项目中如何实现轮播图的效果呢，在传统项目中第一个想到的通常都是swiper插件，代码简单好用。一开始我也是直接npm安装swiper而后照着以前的传统写法写，然而却没有效果，只会显示图片但没有轮播效果。上网查了不少资料也参考其余同行的作法，跟着改可是仍是没效果。后来发现vue是有一个专门的轮播插件：vue-awesome-swiper，下面介绍如何用这个插件实现轮播效果：

        1.安装vue-awesome-swiper插件，具体安装方法请点击这里： vue-awesome-swiper安装方法。

        2.在main.js中引入这个插件：

 

        3.用swiper，swiperSlide组件写template模板：

 

        我是用v-for遍历data里的数组来造成轮播图的，也能够不使用v-for直接写多个swiper-slide组件。若是使用遍历的方法须要注意的是必需要加上:key="item.id"，不然会报错。（PS：如何在data中正确引入图片路径在我上一篇博文中有详细叙述， 点击查看）

        4.这一步是最重要的，设置轮播的初始化，我只写了基本的经常使用swiper轮播属性，有特殊需求的能够去 swiper中文网看具体的api，在这一步已经实现了基本的轮播效果，可是页面样式会让你皱眉，不少网上的教程在这一步就止步了，而后你会发现页面上的轮播图是一大块的，轮播一下就看到空白，这是由于没有引入vue-awesome-swiper的样式，有的朋友说npm安装vue-awesome-swiper时会有两个文件夹，一个是vue-awesome-swiper文件夹，一个是swiper文件夹。而我安装时只有一个vue-awesome-swiper文件夹，因此我是再npm安装swiper，而后直接import引入swiper.css，即在下面截图第17行处换行写import 'swiper/dist/css/swiper.css';，
若是以为这样路径太麻烦，能够将swiper.css复制到static文件夹再引入，具体script以下图所示：

 

 

        到了这里实现轮播效果已经成功，可是你鼠标操做是没有效果的，若是须要鼠标移上中止轮播，鼠标移出继续轮播，那么请继续往下看。

        5.咱们在用jq或angular写轮播插件都知道必需要实例化swiper，在vue中操做swiper对象也是同样：

 

        注意：实例化swiper的时候data里的swiperOption对象里notNextTick必须为true,不然是会出错的，另外咱们的鼠标移上移出事件是写在swiper-slide组件上的，正常写法是不起做用的，须要加上.native才能生效，具体缘由在vue官网上有说明。

        这个轮播效果是我亲测有效才发出来的，但愿对你们有帮助。

 

 

     如需转载请注明出处： http://www.cnblogs.com/zishang91/p/7600006.html，以便有错误能够及时修改，如有错漏不足之处，请见谅而且指点，谢谢！！！