vue中引入swiper(vue中的滑塊組件vue-awesome-swiper)

第一步安裝

npm install vue-awesome-swiper --save

第二部在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

然后就可以在組件中使用該插件

<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;
                    }
                }
            }
        }
    }
</script>
<style>
</style>