swiper使用踩坑：开启loop: true最后一个卡片的事件无法点击（vue2项目）

橘子不开心

已于 2023-02-24 10:29:40 修改

阅读量848

点赞数

文章标签：前端 javascript

于 2023-01-30 11:00:16 首次发布

本文链接：https://blog.csdn.net/weixin_44731219/article/details/128798348

版权

引入swiper组件以及相应样式

在data中初始化设置

      swiperOption: {
        slidesPerView: 'auto',
        loop: true,
        centeredSlides: true,
        loopedSlides: 5,
        on: {
          click: e => {
          // 由于在loop模式下，swiper会复制卡片进行展示，但是事件无法复制，
          // 导致用户无法点击最后一张卡片的绑定的事件
          // 监听绑定事件，获取判断条件（list中的标题作为判断，将name传入绑定的事件）
            let name = e.target.offsetParent.innerText.split('\n')[0]
            this.gotoUrl('', name)
          }
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },





    gotoUrl(url, name) {
      // 解决swiper组件最后一个卡片复制点击事件失效的bug
      let item = this.list[this.list.length - 1]
      if (url === '' && name === item.name) {
        // 写执行逻辑
        return
      }
      // 正常情况下的执行逻辑
    },

在这里插入图片描述
优化补充！！！！！！
由于限制条件没有合理化，会引起很多的无用点击
优化代码如下

      swiperOption: {
        slidesPerView: 'auto',
        loop: true,
        centeredSlides: true,
        loopedSlides: 5,
        on: {
          click: e => {
            const isClick = e.target.localName === 'button' // 卡片仅有一个button标签，作为过滤无效点击的判断
            let name = e.target.offsetParent.innerText.split('\n')[0]
            if (isClick) {
              const clickItem = this.excellent.find(item => item.name === name)
              this.gotoUrl(clickItem.link)
            } // 过滤无用点击
            // let name = e.target.offsetParent.innerHTML.match(/span data-v-4ec60fb3="" class="h-title">(\S*)<\/span>/)[1]
          }
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },