vue轮播图插件vue-awesome-swiper的使用

  最近写vue2.0项目中用到了轮播图的一个插件，也就是vue-awesome-swiper，个人感觉还是比较强大的，swiper官网中的API及配置均可使用(支持3.0)，以下说下使用该插件的一些步骤：

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

然后就可以在组件中使用该插件

[html] view plain copy

1. <span style="font-size:18px;"><template>  
2.     <div>  
3.         <swiper :options="swiperOption"  ref="mySwiper">  
4.             <!-- 这部分放你要渲染的那些内容 -->  
5.             <swiper-slide v-for="item in items">  
6.             </swiper-slide>  
7.             <!-- 这是轮播的小圆点 -->  
8.             <div class="swiper-pagination" slot="pagination"></div>  
9.         </swiper>  
10.     </div>  
11. </template>  
12. <script>  
13.     import { swiper, swiperSlide } from 'vue-awesome-swiper'  
14.     export default {  
15.         components: {  
16.             swiper,  
17.             swiperSlide  
18.         },  
19.         data() {  
20.             return {  
21.                 swiperOption: {  
22.                 pagination: '.swiper-pagination',  
23.                 slidesPerView: 'auto',  
24.                 centeredSlides: true,  
25.                 paginationClickable: true,  
26.                 spaceBetween: 30,  
27.                     onSlideChangeEnd: swiper => {  
28.                         //这个位置放swiper的回调方法  
29.                         this.page = swiper.realIndex+1;  
30.                         this.index = swiper.realIndex;  
31.                     },  
32.                 }  
33.                 swiperSlides: [1, 2, 3, 4, 5]  
34.             }  
35.         },  
36.         //定义这个sweiper对象  
37.         computed: {  
38.   
39.             swiper() {  
40.               return this.$refs.mySwiper.swiper;  
41.             }  
42.         },  
43.         mounted () {  
44.             //这边就可以使用swiper这个对象去使用swiper官网中的那些方法  
45.             this.swiper.slideTo(0, 0, false);  
46.         }  
47.   
48.     }  
49. </script>  
50. <style>  
51. </style></span>  
52. 原文链接：http://blog.csdn.net/xiaogezl/article/details/69676812