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

2018-09-19  本文已影响358人  发发呆哟

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

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

<Swiper {...params}>
  {list.map((item,index)=>{
    return (
      <div className="car-item" key={index}>
        <img className="banner" src={item.banner} alt="" link={item.linkUrl} />
      </div>)
    })}
</Swiper>

/**
 * @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');
    })
  })
}
上一篇 下一篇

猜你喜欢

热点阅读