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

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

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

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

错误示范

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

组件初始化一个banner数组

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

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

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

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

但是实际上:

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

动态图如下:

我们来分析一下原因吧:

原因

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

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

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

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

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

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

正确示范

来看看解决方案吧

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

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

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

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

运行实例

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

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

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

  1. react组件更新swiper

    如果swiper渲染出来的数据不是写死的,那么就会涉及到swiper的更新, 那么我们在new 出 swiper 实例的时候,就需要把这个实例添加到组件里面去,在更新的或卸载的时候就可以直接使用 sw ...

  2. swiper在loop模式,当轮播到最后一张图时候,做其他事件

    1.引入文件: <link rel="stylesheet" href="css/swiper.min.css"> <script src=& ...

  3. angular项目使用Swiper组件Loop时 ng-click点击事件失效处理方法

    在Angular项目中,使用swiper组件进行轮播展示时,存在将swper的loop设置为true时,部分页面的ng-click失效. 原因:将swiper中的looper设置为true时,为了视觉 ...

  4. Atom编辑器之加快React开发的插件汇总

    汇总下比较实用的atom插件[偏react开发的]-- 博主发现这个还是比较全面的! atom-react-autocomplete–项目内,组件名及状态的自动补全  autocomplete-js- ...

  5. vsCode工具做react开发,几个常用插件

    一.环境准备: 1.下载安装VSCode,Node.js,Yarn 2.打开命令行终端或powershell,输入yarn global add create-react-app安装react的脚手架 ...

  6. react开发vscode插件推荐

    原文地址:https://github.com/xieqingtian/blog/issues/2 由于本人主要是做react开发,用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记 ...

  7. swiper插件的使用demo

    老习惯,废话不多说,直接上代码 1.PC端,swiper2,滑动效果 先要引入idangerous.swiper2.7.6.css和idangerous.swiper2.7.6.js(需要先引入jqu ...

  8. ionic3 使用swiper插件 实现轮播效果

    由于app的更新迭代 我需要完成新版本设计图的开发 刚开始就遇到一个问题  首页的banner图需要实现某种效果 而ionic3自带的轮播图效果怎么改都改不到我想要的效果 效果图如下  自动播放 不断 ...

  9. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

随机推荐

  1. sap gui 定义类并实现接口

    1: 直接在类属性的interfaces 框输入 接口名称即可.

  2. ASP.NET 预编译命令(解决发布后第一次访问慢问题)

    ASP.NET 编译工具 (Aspnet_compiler.exe) 官方说明 新建bat文件   @echo off   CD /d C:\Windows\Microsoft.NET\Framewo ...

  3. C++编译变更stlport到使用g++的stl经验总结

    . 花了几天时间,需要把经验给记下来. 1. 需要支持C++11的编译器,最方便的方式就是 yum -y install devtoolset-6 在/usr/local/bin中增加gcc6.sh ...

  4. ASP.Net Core 2.2 MVC入门到基本使用系列 (三)(转)

    本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...

  5. C Alyona and Spreadsheet Codeforces Round #401(Div. 2)(思维)

    Alyona and Spreadsheet 这就是一道思维的题,谈不上算法什么的,但我当时就是不会,直到别人告诉了我,我才懂了的.唉 为什么总是这么弱呢? [题目链接]Alyona and Spre ...

  6. jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

    1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...

  7. input 滑块功能range javascript方法使用

    <script> var rangelist=document.querySelectorAll('[type="range"]'); for(var i=0; i&l ...

  8. Windows 2012 IIS ASP.NET 安装

    from:http://blog.darkthread.net/post-2013-11-29-iis8-asp-net-setup.aspx 專案動用了SignalR 2.0,在我的Windows ...

  9. 安装oracle经验

    1.使用database configuration assistant配置和创建数据库 2.使用net manager配置监听 3.使用netconfiguration assistant配置服务

  10. django 网站的搭建(1)

    使用 python django 模块来搭建自己的博客网站. 本人环境:阿里云centos7+django1.10+python3.5 使用工具:putty + winscp 1.首先安装python ...