前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >swiper轮播图的使用(转载)

swiper轮播图的使用(转载)

作者头像
用户6973020
修改2020-02-24 09:58:32
1.2K0
修改2020-02-24 09:58:32
举报
文章被收录于专栏:视频播放
代码语言:javascript
复制
<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>

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
作者已关闭评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档