vue.js+vue-awesome-swiper轮播

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/YIDBoy/article/details/62887206

一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。

1.安装vie-awesome-swiper

nam install vue-awesome-swiper --save-dev

2.引用vie-awesome-swiper组件，这里我是用vie-cli创建的项目,在main.js：

import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper) //记得不要忘记这句

3.Home.vue下使用

<template>
<div>
<swiper :options="swiperOption" ref="mySwiperA">
    <!-- 幻灯内容 -->
    <swiper-slide>slide1</swiper-slide>
    <swiper-slide>slide2</swiper-slide>
    <!-- 以下控件元素均为可选 -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
</swiper>
</div>
</template>

<script>
    export default{
        data(){
            return {
                swiperOption: {
                    // 所有配置均为可选（同Swiper配置）  
                    notNextTick: true,
                    autoplay: 3000,
                    grabCursor : true,
                    setWrapperSize :true,
                    autoHeight: true,
                    pagination : '.swiper-pagination',
                    paginationClickable :true,
                    prevButton:'.swiper-button-prev',
                    nextButton:'.swiper-button-next',
                    scrollbar:'.swiper-scrollbar',
                    mousewheelControl : true,
                    observeParents:true,
                    onTransitionStart(swiper){
                      console.log(swiper)
                    }
            }
        }
    },
    computed: {
        swiper() {
          return this.$refs.mySwiperA.swiper
        }
    },
    mounted() {
        console.log("每次切换都会触发我");
        this.swiper.slideTo(3, 1000, false)
      }
}
</script>