【react开发】使用swiper插件,loop:true时产生的问题解决方案

这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转。出现了一个问题:

就是向右滑动到该帧时的swiper,点击时未触发react的onClick方法。

因为昨天玩滑板时,手上受了点伤,所以今天没出去玩了,休息一天。于是正好拿来整理下一个技术点。


这里我们使用简单案例来说明:

错误示范


我们先来看看错误代码(其实理论是正确的):

组件初始化一个banner数组

image.png

render中渲染出轮询banner,并给每个banner绑定一个onClick事件,传入参数i

绑定的方法:点击后执行弹出当前为第几个banner

使用Swiper对象,初始化为轮播图。

image.png

照理来讲,我们分别点击这个swiper的每个banner应该会弹出1、2、1、2……的


但是实际上:

(点击1、2两图时触发了,但是点击第3图,click方法就没生效了)

动态图如下:


我们来分析一下原因吧:

原因


首先,banner只有2个,照理应该是2个swiper-slide,

但是在初始化时使用了loop:true

image.png

便由swiper插件再复制生成了2个。因此有了4个:

而新的2个slide是swiper插件生成的,并没有绑定react的事件,所以点击之后没有触发到事件。

怎么办呢?其实这样的效果已经无法完全使用react处理了。因为插件生成的swiper并不是虚拟dom了。

所以这里需要使用到部分的dom操作。然后和react连接起来。

正确示范


来看看解决方案吧

数据一样,第2图中,我们在slide中加入一个属性data-i,这个i就是我们之后要用到方法中参数

image.png


我们在初始化之后,给每个slide绑定一个click事件:

点击后拿到之前绑定的i,表示当前点击的是第几个banner,然后再调用组件对象的click方法。

(这里的_this代表当前react组件对象,因为前面声明了,这样就又可以从dom操作回到react操作了)

image.png

运行实例

现在我们来看看这个案例:

请长按识别二维码(点击)打开:

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpyyxx.html