Swiper插件 loop：true时引发绑定dom的click事件无效及解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/FireBird_one/article/details/83027474

现象

在使用 swiper 这个库的时候，一旦设置 loop:true 的时候，有时会遇到 dom 绑定事件无法触发的问题。

原因

当loop模式下slides前后会clone若干个slide，从而形成一个环路，但是却不会复制绑定在dom上的click事件。

解决

不要将click事件绑定在dom上，而是在new Swiper()中的on回调函数中统一调用。

梨子

 let _this = this;    // 注意 new Swiper中的this指向的是swiper对象，因此要现在外面声明当前组件的this

 new Swiper('.gameList-swiper-container', {

            loop: true,   // 引发问题的根源

            autoplay:{   disableOnInteraction: false  },

            on:{

                click(e){

                     if(!e.target.id) return;   // e.target.id 主要起传参的作用

                     // console.log(e.target.id)

                     _this.props.changeGameData(e.target.id);

                }

            },

            slidesPerView: 4,

            spaceBetween: 20,

 });

 

<div className="swiper-container gameList-swiper-container">

              <div className="swiper-wrapper">

                            {gameList.map((item,index)=>(

                                <div key={index} className="swiper-slide clearfix">

                                        <h2>{item.gameTitle}</h2>

                                        <div className='slideItemBtn' id={[item.gameClass,item.type,item.gameId]}>进入游戏</div>

                                </div>

                            ))}

                </div>

  </div>