swiper——异形swiper中最后一个元素无法使用点击事件

拼搏现实的明天。 2022-09-11 11:22 204阅读 0赞

## swiper——异形swiper中最后一个元素无法使用点击事件 ##

### 1.原因 ###

swiper异形中使用了**loop:true**属性，循环，但是元素总共就那几个，swiper循环时会复制前后元素，但是**只复制元素，不复制事件**，导致最后一个元素渲染成功，但是无法使用事件  
表现在：点击左边这个圆圈其实是切换到了最后一个轮播元素，点击事件失效，但是向右点击到该轮播元素点击事件正常

### 2.解决 ###

因为渲染的元素存在，可以将事件**绑定在dom节点**上，而我使用的方法是比较笨的一种，但是很有效果，点击事件要加在图中按钮中，内容比较隐私，没什么可展示的  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASnVsaWV0X3htag_size_20_color_FFFFFF_t_70_g_se_x_16]

#### 1.html @click="getInfo($event)"判断点击事件源 ####

<div class="long">
       <div class="swiper-container">
         <ul class="swiper-wrapper" @click="getInfo($event)">
           <li class="swiper-slide flex" v-for="item in swiperInfo" :key="item.title" >
             <div class="info flex">
               <h2>{ { item.title}}</h2>
               <p class="line"></p>
               <p class="word">{ { item.product}}</p>
             </div>
             <el-button class="item-btn">立即办理</el-button>
           </li>
         </ul>
       </div>
     </div>

#### 2.methods ####

轮播图初始化

swiperBox () { 
       this.$nextTick(() => { 
         const swiper = new Swiper('.long .swiper-container', { 
           slidesPerView: 3,
           spaceBetween: 100,
           loop: true, // 重点
           centeredSlides: true,
           slideToClickedSlide: true,
           // observer: true, // 修改swiper自己或子元素时，自动初始化swiper
           observeParents: true, // 修改swiper的父元素时，自动初始化swiper
           pagination: { 
             el: '.swiper-pagination',
             clickable: true
           }
         })
         return swiper
       })
     },

#### 因为设置的样式是只有异形最中间的轮播元素存在立即办理按钮，所以方法中点击获取的事件源只判断了el-button和该按钮中的span标签 ####

getInfo (e) { 
       // swiper最后一个元素无法点击，loop只复制了元素，并没有复制事件
       this.$nextTick(() => { 
         // button-span
         const className = e.target.parentElement.className
         // button
         const className1 = e.target.className
         if (className === 'el-button item-btn el-button--default' || className1 === 'el-button item-btn el-button--default') { 
           // 获取h2标签里的标题
           const str = e.target.offsetParent.innerHTML.match(/<h2>(\S*)<\/h2>/)[1]
           // 不同标题不同跳转
           this.swiperPath(str)
         }
       })
     },
    // swiper事件
     swiperPath (name) { 
       switch (name) { 
         case 'name1':
           name1跳转方法
           break
         case 'name2':
           name2跳转方法
           break
         case 'name3':
           name3跳转方法
           break
         default:
           name4跳转方法
           break
       }
     },

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASnVsaWV0X3htag_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/59d33ac67856418e9acb8aec408170b6.png