swiper轮播图的使用

<template>
    <div class="hello">
        <div class="main">
            <swiper style="height:300px" :options="swiperOption" ref="mySwiper" id="swiper_container">
                <!-- slides -->
                <swiper-slide class="box" v-for="(item,index) in list"  :key = "index" ><div class= "son" @click="open(item.url,index)">{{item.text}}</div></swiper-slide>


                <!-- Optional controls -->
                <div class="swiper-pagination" slot="pagination" ref="padding" id="pa"></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>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                list: [
                    {
                        url: "1",
                        text: "我是1"
                    },
                    {
                        url: "2",
                        text: "我是2"
                    },
                    {
                        url: "3",
                        text: "我是3"
                    },
                    {
                        url: "4",
                        text: "我是4"
                    },
                    // {
                    //     url: "5",
                    //     text: "我是5"
                    // },
                    // {
                    //     url: "6",
                    //     text: "我是6"
                    // },
                    // {
                    //     url: "7",
                    //     text: "我是7"
                    // },
                    // {
                    //     url: "7",
                    //     text: "我是8"
                    // },



                ],
                showList: [
                    {
                        txt:"num1"
                    },
                    {
                        txt:"num2"
                    },
                    {
                        txt:"num3"
                    },{
                        txt:"num4"
                    },
                    {
                        txt:"num5"
                    },
                    {
                        txt:"num6"
                    },{
                        txt:"num7"
                    },
                    {
                        txt:"num8"
                    },


                ],
                swiperOption: {

                    // effect : 'coverflow', // 切换效果
                    loop: true, //设置轮播循  只有设置了这个才会自动开启轮播
                    // autoplay: true,//可选选项，自动轮播 默认选项为下面
                    // autoplay: {
                    //
                    //     delay: 1000, // 停留的时间  表示停留3s
                    //     stopOnLastSlide: false, //　轮播懂到最后一个停止轮播
                    //     disableOnInteraction: true,// 操作之后继续轮播  必须为false
                    //     reverseDirection: false, // true开启反向轮播  false不开启
                    // },
                    // 左右翻页按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // 分页器
                    pagination: {
                        el: '.swiper-pagination'

                    },
                    // 下方的滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                    // 键盘控制
                    keyboard: {
                        enabled: true,
                        onlyInViewport: true,
                    },

                    circular: false,

                    slidesPerView: 4,
                    spaceBetween: 10,
                    centeredSlides: false,


                },

            }
        },
        methods: {
            open (value,index) {
                console.log(index);
                console.log(this.showList[index].txt);
                // window.kk = this.showList[index].txt;

            }
        },
        computed: {
            swiper() {
                //计算属性，获得可以操作的swiper对象
                return this.$refs.mySwiper.swiper
            }
        },
        mounted() {
            // 鼠标进入停止轮播
            var comtainer = document.getElementById('swiper_container');
            // 获得可以操作的swiper对象
            var swiper = this.$refs.mySwiper.swiper;
            comtainer.onmouseenter = function () {
                swiper.autoplay.stop();
            };
            // 鼠标离开 继续轮播
            comtainer.onmouseleave = function () {
                // swiper.autoplay.start(); // 即使设置为false 操作之后不再轮播，但是在这里依然会轮播
            };
            // var padding = this.$refs.padding;
            var padding = document.getElementById("pa").childNodes;
            console.log(padding);
            var that = this;

            for(var i =0;i<padding.length;i++){
                padding[i].onmouseenter = function () {
                    var swiper = that.$refs.mySwiper.swiper;
                    swiper.slideNext();
                    console.log("进去");
                };
            }


            //此方法为模拟的，hover到分页器的小圆点后自动触发其本身的click事件
            // $(".swiper-pagination-bullet").hover(function() {
            //     $(this).click(); //鼠标划上去之后，自动触发点击事件来模仿鼠标划上去的事件
            // },function() {
            //     mySwiper.autoplay.start(); //鼠标移出之后，自动轮播开启
            // })


            console.log("kk");
            console.log('this is current swiper instance object', this.swiper)
            // this.swiper.slideTo(1, 1000, false);
            // 当true为false ，  index从0开始
        }
    }
</script>

<style scoped>

    .hello {

        width: 100%;

        padding: 0;
        margin: 0;
    }

    .hello .main {
        width: 50%;
        margin: 20px auto;
    }

    .box {
        width: 100%;
        height: 100%;
        background-color: #eddd88;


    }
    .box .son {
        height: 100%;
        cursor: pointer;
    }

    .box:nth-child(2n) {
        background-color: pink;
    }

    .box3 {
        width: 100%;
        height: 100%;
        background-color: #333;


    }


</style>