文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中swiper开启loop后,点击事件不响应的解决方案

2024-04-02 19:55

关注

swiper开启loop后,点击事件不响应

接手离职同事的项目,然后发现banner图翻页后会出现点击事件不响应,于是修改,网上找了很多方法都无法实现

问题代码如下

    <swiper v-if="bannerArr.length>0" class="home-swper" ref="mySwiper" :options="swiperOptions">
                <swiper-slide
                    v-for="(list,inx) in bannerArr"
                    :key="inx">
                    <img class="banner-img" @click="videoPlay(list)" :src="list.bannerPhotoPath" alt="">
                </swiper-slide>
 
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>

data()中的swiperOptions配置如下

swiperOptions: {
                pagination: {
                    el: '.swiper-pagination'
                },
                loop: true,
                autoplay: 5000,
                speed: 950,
                observer: true,
                // 修改swiper自己或子元素时,自动初始化swiper
                observeParents: true
                // Some Swiper option/callback...
            },

loop配置项设置为true后,swiper 会将数组中的banner多复制出来两张,分别是第一张和最后一张,这样轮播起来才会流畅,但是复制的时候值复制了图片内容 并没有吧点击事件复制了,所以会出现点击事件不起效的现象.

例如:

轮播图原本是3张[a,b,c]  但是执行的时候是5张[c1,a,b,c,a1]

最终找到了一个解决办法  使用@click-slide  但@click-slide 只能在swiper标签上使用,所以点击事件不能直接传值 只能一同修改.

<swiper v-if="bannerArr.length>0" class="home-swper" ref="mySwiper" :options="swiperOptions" @click-slide="videoPlay">
                <swiper-slide
                    v-for="(list,inx) in bannerArr"
                    :key="inx">
                    <img class="banner-img" :src="list.bannerPhotoPath" alt="">
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>

@click-slide 在swiper标签上,就无法直接渠道v-for循环时的直接取的值了,但@click-slide传的参数有序列,遂点击方法中只能通过对比数组中的索引号来进行取值

videoPlay(list){
            //将点击时获取的的banner图的序列号转为数组的索引值
            let inx = list-1
            //当序列号是0的时候判为数组的最后一位
            if(list == 0 ){
                inx = this.bannerArr.length-1
            //当序列号是大于数组1的时候判为数组的第一位
            }else if(list == this.bannerArr.length+1){
                inx = 0
            }
            //取数组中的值
            let i = this.bannerArr[inx]
            console.log(i)
        }

前面说到

轮播图原本是3张[a,b,c]  但是执行的时候是5张[c1,a,b,c,a1]

所以这个轮播图的索引就变成了  [c1,a,b,c,a1]  ==> [0 1 2 3 4 ]       5个数  未判断前能正常点击的只有 序列123  而复制出来的0和4则无法点击 ,而0是c图  4则是a图  需要走上方判断.

swiper设置loop:true时点击事件失效

项目中使用 swiper 时,设置 loop:true时,slides前后会clone若干个slide,从而形成一个环路,但是却不会复制绑定在dom上的click事件,导致复制的slides点击不会跳转。

解决

不要将click事件绑定在dom上,而是在放在 on() 回调函数中调用。

代码如下:

<div class="swiper-father swiper-hot">
    <swiper :options="swiperOption" ref="mySwiper" v-if="homeData5">
    <!-- slides -->
         <swiper-slide  
            v-for='(item,index) in homeData[5]'
            :key="index"> 
            <!-- @click="goInto(item.id)" -->
            <img :src="item.imgUrl" :data-itemid="item.id">
        </swiper-slide>                              
    </swiper>
    <div class="swiper-button-prev btn-swiper swiper-button"  slot="button-prev"></div>
    <div class="swiper-button-next btn-swiper swiper-button" slot="button-next"></div>
</div>    

data部分:

swiperOption: {
    slidesPerView: 3,
    centeredSlides:true, 
    loop:true,
    observer:true,
    observeParents:true, // 当Swiper的父元素变化时,会更新swiper
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    on:{
        transitionStart(){ // 开始translate之前触发
            // 如果是第一张
            if(this.activeIndex == 0){
                this.setTranslate(0); // 设置位移为0
            }
        },
        click(e) {
        	// 使用e.target事件代理获取点击的元素,通过data语法获取元素的属性值
            let url = e.target.dataset.itemid;
            // 这里的this指向轮播,所以我在外边声明了_this用来代表vue实例
            _this.goInto(url); // 跳转到详情页
        }
    }
},

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯