微客导航 » 文章资讯 » react中使用swiper的具体方法

react中使用swiper的具体方法

2023-09-12 20:25:05 165

正文

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

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

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












ReactApp

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

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

importReact,{Component}from'react'

letSwiper=window.Swiper
classAboutextendsComponent{
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=newSwiper(this.refs.lun,{
loop:true,
pagination:{
el:'.swiper-pagination',
clickable:true,
},
});
}
render(){
return(



Slide1
Slide2

Slide3

Slide4

Slide5

Slide6 Slide7 Slide8 Slide9 Slide10

) } } exportdefaultAbout

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

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

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

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

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


if(self.state.swiperList.length===1){
nowNode=se[0];
}else{
for(vari=0;i
通过上面方法就可以实现了swiper的点击事件。我上面的代码中补充了一种条件就是当swiper轮播节点只有一个的时候回出现点击无效的情况，针对这一情况在方法里进行判断一下，如果只有一个节点直接将节点0赋值给nowNode即可。


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


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

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

//获取ele的父节点
varparEle=ele.parentNode;
while(parEle&&parEle!=container){
if(parEle==parentEle){
returntrue;
}
parEle=parEle.parentNode;
}
returnfalse;
}


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
                
            
              
            
                                    上一篇
webstorm配置支持nodejs并自动补全的方法
                
                                    下一篇
Spring中事务管理的四种方法（银行转账为例）
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            python实现将视频按帧读取到自定义目录
                        
                                            
                            Django2 连接MySQL及model测试实例分析
                        
                                            
                            Flutter开发之路由与导航的实现
                        
                                            
                            django框架auth模块用法实例详解
                        
                                            
                            如何在Spring boot加入shiro支持
                        
                                            
                            Android自定义字母导航栏
                        
                                            
                            IDEA的基本使用(让你的IDEA有飞一般的感觉)
                        
                                            
                            opencv设置采集视频分辨率方式
                        
                                            
                            python selenium实现发送带附件的邮件代码实例
                        
                                            
                            django框架forms组件用法实例详解
                        
                                            
                            vue excel上传预览和table内容下载到excel文件中
                        
                                            
                            PHP设计模式之观察者模式入门与应用案例详解
                        
                                            
                            Spring Cloud Sleuth整合zipkin过程解析
                        
                                            
                            python 实现视频 图像帧提取
                        
                                            
                            UGUI实现4位验证码输入
                        
                                            
                            RabbitMQ 最常用的三大模式实例解析
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            3162201930
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 微客导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图