最近写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)
然后就可以在组件中使用该插件
- <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