关于swiperJs自动播报控件自动循环后,不能点击的上一个组件的bugreact代码


起因:

项目中使用到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官网:

http://www.swiper.com.cn/


demo 地址:

https://codepen.io/CandyQiu/pen/LzXmeo?editors=0010




云栖助手项目中,需要自动滚动的,并且点击跳转到具体议程的页面

云栖助手地址(手机体验):https://idst.alibaba.com/yunqi/index.html#/

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...