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

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

 

转载于:https://www.cnblogs.com/yinhao-jack/p/10298765.html