vue 使用swiper輪播圖

vue 使用swiper輪播圖，自動輪播時鼠標移入暫停，鼠標移出再次播放，並給出多個輪播的處理方法以及後臺獲取數據時沒法循環輪播解決方案

一、安裝 vue-awesome-swiper
使用vue開發界面時，不少時候須要用到輪播圖，有的時候須要在一個頁面中使用多個輪播圖，這個時候就須要用到單獨的，鼠標移入暫停自動輪播，鼠標移出再次自動輪播。

一、npm install vue-awesome-swiper

二、代碼部分
<template>

<div class="icontent">
    <div @mouseenter="on_top_enter" @mouseleave="on_top_leave">
        <!-- 加上v-if="banner_data.length > 1" 來防止swiper出現沒法循環播放的效果 -->
        <swiper class="my-swiper" v-if="banner_data.length > 1" :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="ba_data in banner_data">
            <img :src="ba_data.img_url" alt="banner">
        </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>
        </swiper>
    </div>
    <div class="my-swiper" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">
        <swiper class="bafang_swiper" v-if="bannerbottom_data.length > 1" :options="swiperOption" ref="myBotSwiper">
            <!-- slides -->
            <swiper-slide v-for="bot_data in bannerbottom_data">
            <img :src="bot_data.img_url" alt="bot_banner">
            </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>
        </swiper>
    </div>
</div>

</template>

<script>

import Vue from 'vue'
// 導入相關的包
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import $ from 'jquery'
// 使用模塊
Vue.use(VueAwesomeSwiper)
export default {
    name: "index",
    data () {
        return {
            msg: 'index',
            // 配置輪播圖的相關參數 使用時綁定到標籤裏的 options 屬性
            swiperOption: {
                // some swiper options/callbacks
                // 全部的參數同 swiper 官方 api 參數
                // 設置分頁器
                pagination: {
                    el: '.swiper-pagination',
                    // 設置點擊可切換
                    clickable :true
                },
                // 設置前進後退按鈕
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                // 設置自動輪播
                autoplay: { 
                    delay: 2000,
                    disableOnInteraction: false,
                },
                // 設置輪播可循環
                loop : true
            },
            banner_data: [
                {img_url:'http://img.bimg.126.net/photo/ZZ5EGyuUCp9hBPk6_s4Ehg==/5727171351132208489.jpg'},
                {img_url:'http://img.juimg.com/tuku/yulantu/140218/330598-14021R23A410.jpg'},
                {img_url:'http://h.hiphotos.baidu.com/lvpics/w=1000/sign=bb4d3e46ecf81a4c2632e8c9e71a6159/77094b36acaf2edd14b2c5db8a1001e939019345.jpg'}
            ],
            bannerbottom_data: [
                {img_url:'http://img.bimg.126.net/photo/ZZ5EGyuUCp9hBPk6_s4Ehg==/5727171351132208489.jpg'},
                {img_url:'http://img.juimg.com/tuku/yulantu/140218/330598-14021R23A410.jpg'},
                {img_url:'http://h.hiphotos.baidu.com/lvpics/w=1000/sign=bb4d3e46ecf81a4c2632e8c9e71a6159/77094b36acaf2edd14b2c5db8a1001e939019345.jpg'}
            ]
        }
    },
    methods: {
        //經過得到的swiper對象來暫停自動播放
        on_bot_enter() {
            this.myBotSwiper.autoplay.stop()
        },
        on_bot_leave() {
            this.myBotSwiper.autoplay.start()
        },
        on_top_enter() {
            this.mySwiper.autoplay.stop()
        },
        on_top_leave() {
            this.mySwiper.autoplay.start()
        }
    },
    //計算屬性，得到能夠操做的swiper對象
    computed: {
        // 獲取當前的swiper對象
        mySwiper() {
            // mySwiper 是要綁定到標籤中的ref屬性
            return this.$refs.mySwiper.swiper     
        },
        myBotSwiper() {
            return this.$refs.myBotSwiper.swiper
        }
    },
    created: function() {
    }
}

</script>
<style scoped>

.icontent{
    overflow: hidden;
    width: 100%;
}
.my-swiper{
    height: 500px;
}
.my-swiper:hover{
    cursor: pointer;
}
.my-swiper img{
    height: 100%;
    width: 100%;
}

</style>