1. 解決：數據預警 swiper輪播點擊失效
3. 核心：點擊事件綁定在swiper里面，而不是在vue template div上面。因為swiper在looptrue的時候會多復制2個假的，點擊會無效。
通過在swiper上綁點擊，通過let index = vm.clickedIndex - vm.activeIndex + vm.realIndex;拿到真的index，將復制的2個index處理
4. 代碼：
swiperOption: { slidesPerView: 5, speed: 3000, loop: true, observer: true, // 修改swiper自己或子元素時，自動初始化swiper observeParents: true, // 修改swiper的父元素時，自動初始化swiper clicks: { preventClicksPropagation: false, }, direction: "vertical", autoplay: { autoplay: true, delay: 1000, disableOnInteraction: false, }, on: { click: function () { // 這里有坑，需要注意的是：this 指向的是 swpier 實例，而不是當前的 vue， 因此借助 vm，來調用 methods 里的方法 console.log(this); // console.log(this.$children[0].data.id); // click改為箭頭函數可以this就變成vue可以通過vue獲取id // let id = this.$children[0].data.id; vm.handleClickSlide(this); // vm.showDetail(id); }, }, }, handleClickSlide(vm) { // 注意這樣拿到的是真的list里面的index, 但looptrue的時候，會多復制2個index,需要手動變下，才可以實現和list的index完全對應 // 在swiper里注冊點擊事件，loop true復制的2個假的才可以被點擊上，所以點擊事件不寫在vuetemplate的div上面 // 關鍵詞： swiper loop true點擊失效 let index = vm.clickedIndex - vm.activeIndex + vm.realIndex; if (index === this.list.length) { index = 0; } else if (index === this.list.length +1) { index = 1; } else if (index === this.list.length +2) { index = 2; } // 我得到的index就是點擊的item在實際數組中的下標index console.log(index); // console.log(this.list[index].id); // 后面可以根據得到的index判斷跳到每個對應的路由this.$router.push({path: `/single`}); this.showDetail(this.list[index].id); },