【taro react】 ---- 解决 Swiper 组件的 circular 属性为 true 时,在 H5 出现点击实现失效问题

1. 问题场景

Swiper 组件采用衔接滑动的时候,会将轮播前后的图片进行复制,从而形成视觉上的循环滑动。但是在H5的时候,对内部子组件的点击事件并没有进行复制。这样就导致了前后两张图片虽然效果上实现了循环轮播,但是事件确失效了,这里就需要解决点击事件失效的问题。

2. 测试子组件的点击事件

  1. 在子组件 Image 上定义点击事件,并输出 image-banner;
  2. 在盒子上定义点击事件,并输出 content-banner;
  3. 测试原子组件和复制的子组件的点击事件执行效果。

输入图片说明

3. 原子组件

输入图片说明

可以看到,不管是子组件的事件还是盒子上的组件,都执行了输出。

4. 复制子组件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rattenking

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值