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    <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: {                      //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true                      notNextTick: true,                      pagination: '.swiper-pagination',                      slidesPerView: 'auto',                      centeredSlides: true,                      paginationClickable: true,                      spaceBetween: 30,                          onSlideChangeEnd: swiper => {                              //这个位置放swiper的回调方法                              this.page = swiper.realIndex+1;                              this.index = swiper.realIndex;                          }                      }                  }              },              //定义这个sweiper对象              computed: {                  swiper() {                    return this.$refs.mySwiper.swiper;                  }              },              mounted () {                  //这边就可以使用swiper这个对象去使用swiper官网中的那些方法                  this.swiper.slideTo(0, 0, false);              }          }      </script>      <style>      </style>  

转载自：http://blog.csdn.net/xiaogezl/article/details/69676812