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'

dreamStart_Lin

9261人浏览 · 2017-04-18 00:17:29

dreamStart_Lin · 2017-04-18 00:17:29 发布

最近写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 plaincopy 
   
 <span style="font-size:18px;"><template>  
     <div>  
         <swiper :options="swiperOption"  ref="mySwiper">  
             <!-- 这部分放你要渲染的那些内容 -->  
             <swiper-slide v-for="item in items">  
             </swiper-slide>  
             <!-- 这是轮播的小圆点 -->  
             <div class="swiper-pagination" slot="pagination"></div>  
         </swiper>  
     </div>  
 </template>  
 <script>  
     import { swiper, swiperSlide } from 'vue-awesome-swiper'  
     export default {  
         components: {  
             swiper,  
             swiperSlide  
         },  
         data() {  
             return {  
                 swiperOption: {  
                 pagination: '.swiper-pagination',  
                 slidesPerView: 'auto',  
                 centeredSlides: true,  
                 paginationClickable: true,  
                 spaceBetween: 30,  
                     onSlideChangeEnd: swiper => {  
                         //这个位置放swiper的回调方法  
                         this.page = swiper.realIndex+1;  
                         this.index = swiper.realIndex;  
                     },  
                 }  
                 swiperSlides: [1, 2, 3, 4, 5]  
             }  
         },  
         //定义这个sweiper对象  
         computed: {  
   
             swiper() {  
               return this.$refs.mySwiper.swiper;  
             }  
         },  
         mounted () {  
             //这边就可以使用swiper这个对象去使用swiper官网中的那些方法  
             this.swiper.slideTo(0, 0, false);  
         }  
   
     }  
 </script>  
 <style>  
 </style></span>  
 原文链接：http://blog.csdn.net/xiaogezl/article/details/69676812

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^