swiper组件的onclick事件的问题

xxyGoTop commented 5 years ago

问题描述 [问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]

以下问题都出在h5上，h5上在使用swiper绑定onClick事件的时候出现了以下问题：

swiperItem上绑定onClick事件无效
如果在swiperIitem的children组件上绑定onClick事件，左滑第一个item的click事件失效（奇怪的问题）
如果使用 onAnimationfinish获取current，事件绑定到swiper的父级，swiper的切换下标有问题

复现步骤

如果在swiperIitem的children组件上绑定onClick事件，左滑第一个item的click事件失效

<View>
<Swiper
className='home-banner__swiper'
circular
autoplay
interval='3000'
>
<SwiperItem>
  <View onClick={ () => console.log(1) }>
    <Image className='home-banner__img' src={formatCdnImgPath('home_banner')}></Image>
  </View>
</SwiperItem>
<SwiperItem>
  <View>
    <Image className='home-banner__img' src={formatCdnImgPath('home_banner3')}></Image>
  </View>
</SwiperItem>
<SwiperItem>
  <View>
    <Image className='home-banner__img' src={formatCdnImgPath('home_banner2')}></Image>
  </View>
</SwiperItem>
</Swiper>
</View>

swiperItem上绑定onClick事件无效

<View>
  <Swiper
    className='home-banner__swiper'
    circular
    autoplay
    interval='3000'
  >
    <SwiperItem onClick={ () => console.log(1) }>
      <View>
        <Image className='home-banner__img' src={formatCdnImgPath('home_banner')}></Image>
      </View>
    </SwiperItem>
    <SwiperItem>
      <View>
        <Image className='home-banner__img' src={formatCdnImgPath('home_banner3')}></Image>
      </View>
    </SwiperItem>
    <SwiperItem>
      <View>
        <Image className='home-banner__img' src={formatCdnImgPath('home_banner2')}></Image>
      </View>
    </SwiperItem>
  </Swiper>
</View>

// 提供完整可复现的代码和整理好代码格式，有助于我们快速定位问题，节省你我时间。 // 代码提供不全或代码格式混乱的 issues 【有可能被忽略】，烦请各位注意。

期望行为 可以绑定onclick事件

报错信息 无

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

操作系统: [e.g. Windows 10]
Taro 版本 [e.g. v.1.2.26]
Node.js 版本 [e.g. v11.2.0]
报错平台 [h5]

补充信息 [可选] [根据你的调查研究，出现这个问题的原因可能在哪里？] 解决方案：在源码上添加onClick事件，添加在swiper事件上, 代码如下：

on: {
  slideChange () {
    let e = new TouchEvent('touchend')
    Object.defineProperty(e, 'detail', {
      enumerable: true,
      value: {
        current: this.realIndex
      }
    })
    onChange && onChange(e)
  },
  transitionEnd () {
    let e = new TouchEvent('touchend')
    Object.defineProperty(e, 'detail', {
      enumerable: true,
      value: {
        current: this.realIndex
      }
    })
    onAnimationfinish && onAnimationfinish(e)
  },
  onClik() {
    let e = new TouchEvent('touchend')
    Object.defineProperty(e, 'detail', {
      enumerable: true,
      value: {
        current: this.realIndex
      }
    })
    onClik && onClik(e)
  }
}