vue 使用swiper轮播图

vue 使用swiper轮播图，自动轮播时鼠标移入暂停，鼠标移出再次播放，并给出多个轮播的处理方法以及后台获取数据时无法循环轮播解决方案

1、安装 vue-awesome-swiper
使用vue开发界面时，很多时候需要用到轮播图，有的时候需要在一个页面中使用多个轮播图，这个时候就需要用到单独的，鼠标移入暂停自动轮播，鼠标移出再次自动轮播。

1、npm install vue-awesome-swiper

2、代码部分
<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>