• swiper插件 点击事件 的坑


    需求:我需要做的东西是,下面轮播6个视频,点击视频,上面大视频播放对应的内容

    遇到的坑:当时是只并排显示3个,6个视频循环第一遍的时候点击事件都正常,但是第二遍的1,2,3点击事件失效,4,5,6正常

    尝试了很多版本的swiper(3版本,4版本,vue-awesome-swiper:3.1.1)都有这种现象

    有两个解决方案:

    一:关掉swiper的环路属性(loop:false),这样一直都是正常的

    二:点击事件,用原生js写

    /**
             * 给视频添加点击事件
             */
    
            addEventClickToVideo(){
                const newSwiper = document.getElementById("swiper")
                const item = newSwiper.getElementsByClassName('swiper-video')
                item.forEach((element,index) => {
                    element.onclick = ($event)=>{
                        console.log($event)
                        console.log($event.currentTarget.dataset.url);         //  $event.currentTarget 获取到的是上一层的元素      $event.arget 获取到的是本层的元素
    const _url = $event.currentTarget.dataset.url // 知识点:此处获取的 url 是 html5中自定义属性data-*,比如此处的url, 是从该元素属性 date-url='' 获取的
    const _cover
    = $event.currentTarget.dataset.cover
    this.handleSwiperVideo(_url,_cover)
    $event.preventDefault()
    $event.stopPropagation();
    }
    });
    }
     new Swiper('.swiper-container', {
                        autoplay:true,
                        loop:true,
                        slidesPerView:3,
                        on:{
                            init:function(swiper){
                                _self.addEventClickToVideo()        //  在swiper回调中调用点击事件
                            }
                        },
                        // 左右按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    
                    })
  • 相关阅读:
    二分查找递归和非递归版
    git常用命令记录
    总结下本周所学的建站流程极其经验
    Ubuntu下su命令失败的解决方法,及其环境变量失效解决
    ubuntu下node安装的三种方法
    Markdown学习及如何在博客园中使用
    nmcli使用方法
    Elasticsearch 升级 7.x 版本后,我感觉掉坑里了!
    Spring Data Elasticsearch基本操作自定义查询
    ElasticSearch——聚合
  • 原文地址:https://www.cnblogs.com/dandanyajin/p/14850520.html
Copyright © 2020-2023  润新知