vue-awesome-swiper的点击事件

最新推荐文章于 2024-09-13 21:48:09 发布

林剑河

最新推荐文章于 2024-09-13 21:48:09 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/ljhljh1/article/details/115720026

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

这篇博客讲述了在使用Swiper组件时遇到的普通点击事件无法触发的问题。作者通过在swiperOption中重写click事件并传递真实索引来解决这个问题。在`on`对象内定义了点击事件监听器，调用了`handleDetailClick`方法，并传入当前滑块的索引，然后在`methods`里处理点击事件，触发`enterTeamDetail`自定义事件，传递团队列表的id。

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

swiper的普通点击事件不管用，需要单独重写

1、swiperOption

swiperOption: {
        loop: false,
        slidesPerView: '3',
        spaceBetween: 24,
        centeredSlides: false,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          click: function() {
            // 这里的this表示swiper
            vm.handleDetailClick(this.realIndex)
          }
        }
      }

2、

created() {
    vm = this
  },
methods: {
  handleDetailClick(index) {
    let id = this.teamList[index].id
    this.$emit('enterTeamDetail', id)
  }
}