react中使用swiper的具体方法


Posted in Javascript onMay 15, 2018

正文

最近的react项目需要使用轮播图,自然而然的就想到了swiper,一直想通过npm安装的方式来使用,但是网上找了很多,资料很少,于是就暂时通过在index.html里直接引用swiper的js和css文件的方式来加载,下面来说一下具体的步骤和使用方法。

首先说一下我这里使用的是swiper3x系列。接下来说具体的步骤:

在index.html中引入js和css文件

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow" >
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow" >
   <link rel="stylesheet" type="text/css" href='%PUBLIC_URL%/static/css/swiper.min.css'>
 
  <title>React App</title>
 </head>
 <body>
  <div id="root"></div>
  <script src='%PUBLIC_URL%/static/js/swiper.min.js'></script>
 </body>
</html>

当然,我这个是将js和css文件下载到了本地,你也可以使用cdn路径,至此,引入基本上算是引入完成了,接下来就是如何在react组件中进行调用

在这里需要说一下,引入的js文件在组件当中不能直接使用,需要在最开始的位置声明一个变量,后续的使用方法和普通的html写法就一致了,区别就在于应该在哪个生命周期中写,个人建议实在componentDidUpdate周期中进行写,因为有时候数据是异步获取的,刚刚完成时不一定数据获取完成,数据获取完成以后更新state,此时会触发update周期。

import React,{Component} from 'react'

let Swiper = window.Swiper
class About extends Component{
 constructor(props){
 super(props);
 this.state = {
  myName : "这里是about页面",
  
 }
 }
 
componentWillUnmount() {
  if (this.swiper) { // 销毁swiper
   this.swiper.destroy()
  }
 }
componentDidUpdate(){
 if(this.swiper){
   this.swiper.slideTo(0, 0)
   this.swiper.destroy()
   this.swiper = null;
  }
 this.swiper = new Swiper(this.refs.lun, {
       loop:true,
       pagination: {
       el: '.swiper-pagination',
       clickable: true,
      },
     });
 }
render(){ 
return (
  <div>
   <div className="swiper-container" ref="lun">
   <div className="swiper-wrapper">
   <div className="swiper-slide" data-id="0">Slide 1</div>
   <div className="swiper-slide" data-id="1">Slide 2</div>
   <div className="swiper-slide" data-id="2">Slide 3</div>
   <div className="swiper-slide" data-id="3">Slide 4</div>
   <div className="swiper-slide" data-id="4">Slide 5</div>
   <div className="swiper-slide" data-id="5">Slide 6</div>
   <div className="swiper-slide" data-id="6">Slide 7</div>
   <div className="swiper-slide" data-id="7">Slide 8</div>
   <div className="swiper-slide" data-id="8">Slide 9</div>
   <div className="swiper-slide" data-id="9">Slide 10</div>
  </div>
<div id="PgFather">
 <div className="swiper-pagination" id='body-left-pagination'></div>
</div>
  
 </div>
  </div>
 )
 }
}
export default About

如此便完成了一个轮播的实现,这里我写的demo只是将数据写死在了组件里,一般情况应该是通过异步来进行获取数据。

其实,这里还有一个问题,就在于给swiper-slide添加点击事件,一般来说是直接给swiper-slide这个div添加一个onClick事件,但是问题就出现在了这里,若这个轮播是可以循环轮播的话,swiper会自动生成两个节点,一个是第一个节点,一个是最后一个节点,分别放置于最后和最开始,便于轮播联动。然而他复制节点的时候,无法复制其onClick的点击事件,这就造成了当swiper初始化完成以后向左滑动第一个和向右滑动到最后一个再滑一次这两个节点是没有点击事件的。于是我们就应该使用到swiper的回调函数了,下面我们对构建swiper的方法进行改造一下。

this.swiper = new Swiper(this.refs.lun, {
       loop:true,
       pagination: {
       el: '.swiper-pagination',
       clickable: true,
       onClick: function(swiper,e){

      var paginationContainer= document.getElementById('PgFather');
      var paginationFather = document.getElementById('body-left-pagination');
//这里是判断是否点击的轮播底部圆点,因为方法在点击圆点的时候也会触发,所以为了能保证点击圆点轮播效果,应该将其屏蔽掉
      if(!this.isDOMContains(paginationFather,e.target,paginationContainer)){
       var se = document.querySelectorAll(".body-left-lunbo .swiper-slide");
       var nowNode = "";
       var index = swiper.activeIndex;

       if(index==0){
        index = se.length-3;
       }else if(index==se.length-1){
        index=0;
       }else{
        index = swiper.activeIndex-1;
       }


       if(self.state.swiperList.length===1){
        nowNode = se[0];
       }else{
        for(var i=0;i<se.length;i++){
         if(se[i].getAttribute('data-swiper-slide-index')==index){
          nowNode = se[i]
         }
        }
       }
       if(nowNode){
        var id= nowNode.getAttribute("data-id");
        var itemObj = {
         id:id
        }
        goDetail(itemObj,self.state.myName)
        return true
       }
      }else{
       return false
      }
    }
      },
     });

通过上面方法就可以实现了swiper的点击事件。我上面的代码中补充了一种条件就是当swiper轮播节点只有一个的时候回出现点击无效的情况,针对这一情况在方法里进行判断一下,如果只有一个节点直接将节点0赋值给nowNode即可。

上面有一个判断是否点击的是底部圆的点判断我在下面贴出来供大家参考

isDOMContains:function(parentEle,ele,container){
  console.log(parentEle)
  //判断一个节点是否是其子节点
 //parentEle: 要判断节点的父级节点
 //ele:要判断的子节点
 //container : 二者的父级节点

 //如果parentEle h和ele传的值一样,那么两个节点相同
 if(parentEle == ele){
  return true
 }
 if(!ele || !ele.nodeType || ele.nodeType != 1){
  return false;
 }
 //如果浏览器支持contains
 if(parentEle.contains){
  return parentEle.contains(ele)
 }
 //火狐支持
 if(parentEle.compareDocumentPosition){
  return !!(parentEle.compareDocumentPosition(ele)&16);
 }

 //获取ele的父节点
 var parEle = ele.parentNode;
 while(parEle && parEle != container){
  if(parEle == parentEle){
   return true;
  }
  parEle = parEle.parentNode;
 }
 return false;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
js 获取时间间隔实现代码
May 12 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
jquery实现图片轮播器
May 23 jQuery
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 #Javascript
浅谈AngularJS中$http服务的简单用法
May 15 #Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 #Javascript
解决linux下node.js全局模块找不到的问题
May 15 #Javascript
vue :src 文件路径错误问题的解决方法
May 15 #Javascript
利用npm 安装删除模块的方法
May 15 #Javascript
vux uploader 图片上传组件的安装使用方法
May 15 #Javascript
You might like
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
php经典趣味算法实例代码
2020/01/21 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
如何利用find命令查找文件
2015/02/07 面试题
教师学习培训邀请函
2014/02/04 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python