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

<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