Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 95|回复: 0

react使用swiper,解决添加点击事件首位图片点击失效,解决轮播按钮被覆盖问题

[复制链接]
  • TA的每日心情
    奋斗
    昨天 13:57
  • 签到天数: 228 天

    [LV.7]常住居民III

    1523

    主题

    1581

    帖子

    10万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    106930
    发表于 2021-8-28 17:32:43 | 显示全部楼层 |阅读模式
    JS部分
     1 createSwiper1() {
     2     var option = {
     3         // slidesPerView: 5,
     4         slidesPerView: 3,
     5         centeredSlides:true,
     6     };
     7     if (this.state.newData.length > 2) {
     8         option = {
     9             loop: true,
    10             loopedSlides: this.state.newData.length,
    11             loopAdditionalSlides: 3,
    12             slidesPerView: 'auto',
    13             // slidesPerView: '3',
    14             centeredSlides:true,
    15             effect:'coverflow',
    16             paginationClickable: true,
    17             preventLinksPropagation: true,
    18             observer: true,//修改swiper自己或子元素时,自动初始化swiper
    19             observeParents: true,//修改swiper的父元素时,自动初始化swiper
    20             coverflow:{
    21                 rotate: 0,
    22                 stretch: 85,
    23                 depth: 52,
    24                 modifier: 1,
    25                 slideShadows: true
    26             },
    27 
    28             nextButton: '.swiper-button-next',
    29             prevButton: '.swiper-button-prev',
    30             onTouchEnd: (swiper) => {
    31                 window.slideSwitchMp3();
    32             }
    33         }
    34     }
    35     var  mySwiper = new Swiper('#'+ (this.props.place +'NewSwiperId'),option);
    36 
    37     mySwiper.on('tap',(swiper,e) => {
    38         var that=this;
    39         let item = this.state.newData[swiper.realIndex];
    40         var buttonId=document.getElementById(this.props.place +'buttonId')
    41         var buttonPrev=document.getElementById(this.props.place +'button-prev')
    42         var buttonNext=document.getElementById(this.props.place +'button-next')
    43     if(that.isDOMContains(buttonPrev,e.target,buttonId) ||that.isDOMContains2(buttonNext,e.target,buttonId)){
    44             return false;
    45     }else {
    46         if (item) {
    47             this.setState({newDetailShow: true, selectNewItem: item, eyeNum: 0, newDetailData: []}, () => {
    48                 if (item.infotype == 2) {
    49                     this.createPdf(item.pdfurl);
    50                 }
    51                 else {
    52                     this.fetchNewDetail();
    53                 }
    54                 this.props.parentCallback && this.props.parentCallback();
    55             });
    56             window.clickSoundEffect();
    57         }
    58     }
    59     });
    60 },
    View Code

     




    解决轮播按钮被覆盖
     1 isDOMContains:function(parentEle,ele,container){
     2 
     3     //判断一个节点是否是其子节点
     4     //parentEle: 要判断节点的父级节点
     5     //ele:要判断的子节点
     6     //container : 二者的父级节点
     7 
     8     //如果parentEle h和ele传的值一样,那么两个节点相同
     9     if(parentEle == ele){
    10         return true
    11     }
    12     if(!ele || !ele.nodeType || ele.nodeType != 1){
    13         return false;
    14     }
    15     //如果浏览器支持contains
    16     if(parentEle.contains){
    17         return parentEle.contains(ele)
    18     }
    19 
    20     //火狐支持
    21     // if(parentEle.compareDocumentPosition){
    22     //     return !!(parentEle.compareDocumentPosition(ele)&16);
    23     // }
    24 
    25     //获取ele的父节点
    26     // var parEle = ele.parentNode;
    27     // while(parEle && parEle != container){
    28     //     if(parEle == parentEle){
    29     //         return true;
    30     //     }
    31     //     parEle = parEle.parentNode;
    32     // }
    33     return false;
    34 },
    35 
    36 
    37 isDOMContains2:function(parentEle,ele,container){
    38     console.log("parentEle",parentEle)
    39     console.log("container",container)
    40     //判断一个节点是否是其子节点
    41     //parentEle: 要判断节点的父级节点
    42     //ele:要判断的子节点
    43     //container : 二者的父级节点
    44 
    45     //如果parentEle h和ele传的值一样,那么两个节点相同
    46     if(parentEle == ele){
    47         return true
    48     }
    49     if(!ele || !ele.nodeType || ele.nodeType != 1){
    50         return false;
    51     }
    52     //如果浏览器支持contains
    53     if(parentEle.contains){
    54         return parentEle.contains(ele)
    55     }
    56 
    57     //火狐支持
    58     // if(parentEle.compareDocumentPosition){
    59     //     return !!(parentEle.compareDocumentPosition(ele)&16);
    60     // }
    61 
    62     //获取ele的父节点
    63     // var parEle = ele.parentNode;
    64     // while(parEle && parEle != container){
    65     //     if(parEle == parentEle){
    66     //         return true;
    67     //     }
    68     //     parEle = parEle.parentNode;
    69     // }
    70     return false;
    71 },
    View Code

     





    render部分
     1 {
     2     !this.state.newDetailShow &&
     3     <div className="new-list" ref="newListId">
     4     <div className="swiper-container " id={ this.props.place +'NewSwiperId'} style={{transform: this.props.place == 'top' ? 'rotateZ(180deg)': 'rotateZ(0deg)'}}>
     5 
     6     <div className="swiper-wrapper">
     7 {
     8     this.state.newData && this.state.newData.map((item,index) => {
     9     return (
    10     <div className="swiper-slide" key={index}  data-i={index}>
    11     <img src={item['titlepic'].toLowerCase().indexOf("http") !== 0 ? "http://" + item['titlepic'] : item['titlepic']}    style={{transform: this.props.place == 'top' ? 'rotateZ(180deg)': 'rotateZ(0deg)'}} />
    12     <div className="swiper-mask"></div>
    13     </div>
    14     )
    15 })
    16 }
    17 {/*onClick={this.newslistclick.bind(item,index)}*/}
    18 
    19     </div>
    20     <div className="container" id={ this.props.place +'buttonId'} >
    21          <div className="swiper-button-next"  id={ this.props.place +'button-next'} ></div>
    22          <div className="swiper-button-prev"  id={ this.props.place +'button-prev'}></div>
    23     </div>
    24     </div>
    25 
    26     </div>
    27 }
    View Code

     








    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2022-1-21 03:07 , Processed in 0.073918 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表