踩坑之路--vue-awesome-swiper点击事件消失

坑1:将事件直接写在 swiper 内部的dom里面

当swiper进行loop循环时,进行第二轮循环时,将会复制dom,但是并没有复制事件,导致第二轮图片循环时,图片的点击事件消失.

坑2: 想偷鸡 将事件挂在组件上&&给时间加修饰符 冒得用的

依旧和上面一样,第二轮无效了,理由也如上

解决方案:

        利用组件提供的回调函数-->解决点击问题
        利用ref获取到组件内部当前展示页面的index -->解决当前图片的index问题(需要一丢丢的判断)

          click: () => {
            let swiper = this.$refs.mySwiper.swiper;
            let i;
            if (swiper.activeIndex > this.assetData.data.length) {
              i = swiper.activeIndex % this.assetData.data.length - 1;
            } else {
              i = swiper.activeIndex ? swiper.activeIndex - 1 : this.assetData.data.length - 1;
            }
            let item = this.pictureData[i];
          }

 获取到点击那一项的数据i(下标)item(数据)