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

最新推荐文章于 2024-06-21 11:17:24 发布

Juliet_xmj

最新推荐文章于 2024-06-21 11:17:24 发布

阅读量1.6k

点赞数 1

分类专栏：插件及UI框架开发问题解决文章标签： javascript swiper vue

本文链接：https://blog.csdn.net/juliet_xmj/article/details/120325898

版权

插件及UI框架开发问题解决专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细阐述了在使用Swiper组件实现异形布局时，由于loop属性导致的最后一个元素点击事件失效问题，通过绑定DOM节点和利用swiper插件内置事件解决了这一问题，包括使用swiper自带的click事件和HTML元素的事件监听。

摘要由CSDN通过智能技术生成

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

1.原因

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

2.解决

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

1.html @click="getInfo($event)"判断点击事件源，也可以使用swiper插件自带的点击事件

1) swiper插件自带的点击事件 在这里插入图片描述

on: {
     click: function (e) {
       // e.clickedSlide获取点击的轮博元素
     }
   }

2) @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
   }
 },