起因:
项目中使用到Swiper,循环滚动, 使用 “循环 loop”参数后, 发现上一个元素无法点击点击。
使用中发现他会在首部和尾部。自动创建两个元素,并且导致该元素的onClick事件会失效,如下图红色框部分:
解决方式:
使用 class 获取点击事件,并且进行操作
$(".swiper-slide").click(function(e) { alert("点击中了!"); });
swiper代码:
<div className="swiper-container main_meeting"> <div className="swiper-wrapper"> <div className="swiper-slide">Slide 1</div> <div className="swiper-slide">Slide 2</div> <div className="swiper-slide">Slide 3</div> <div className="swiper-slide">Slide 4</div> </div> </div>
meetingSwiper = new Swiper('.main_meeting',{ autoplay: 3000,//可选选项,自动滑动 speed: 400,loop: true,//可选选项,开启循环 // 用户操作swiper之后,是否禁止autoplay。默认为true:停止。 autoplayDisableOnInteraction: false,// spaceBetween: 30,// 拖动释放时不会输出信息 preventLinksPropagation: true,// 默认为true时,仅本swiper的container内的分页器有效,设置为false后,container以外的分页器也生效了。 uniqueNavElements: false,})
swiper官网:
demo 地址:
https://codepen.io/CandyQiu/pen/LzXmeo?editors=0010
云栖助手项目中,需要自动滚动的,并且点击跳转到具体议程的页面。
云栖助手地址(手机体验):https://idst.alibaba.com/yunqi/index.html#/
原文链接:https://www.f2er.com/react/302560.html