原生js处理swiper.js在loop模式下点击事件bug

swiper.js是一个强大的滑屏组件,经常用于制作轮播图。

环境描述:react + react-id-swiper
问题描述swiperloop模式下,一些swipe点击事件不能触发
问题分析loop模式下,swiper插件会复制第一个 swipe和最后一个swipe,即存在n+2个swipe,由于多处的两个swipe是由插件生成的dom,并非虚拟dom,我们绑定的onClick事件并不会绑定到这两个swipe上去。
解决方案:手动绑定点击事件


  {list.map((item,index)=>{
    return (
      
) })}
/** * @desc 手动添加点击事件 */ initClick = () => { let banners = Array.from(document.getElementsByClassName('banner')); if(!Array.isArray(banners)) return; banners.forEach((item)=>{ item.addEventListener('click',function(){ this.getAttribute('link')&&window.open(this.getAttribute('link'),'_blank'); }) }) }

你可能感兴趣的:(原生js处理swiper.js在loop模式下点击事件bug)