HTML部分

<swiper :options="bannerOption" class="ba_s" ref="bannerSwiper" v-if="bannerList.length>0"><swiper-slide v-for="(item,index) in bannerList" :key="index"><img :src="item.bannerImg" alt="" /></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper>

在 loop 開啟的時(shí)候，dom 綁定事件是有問(wèn)題的。因?yàn)樵趌oop模式下slides前后會(huì)復(fù)制若干個(gè)slide，從而形成一個(gè)環(huán)路，但是卻不會(huì)復(fù)制綁定在dom上的click事件。
在swiper中的回調(diào)函數(shù)添加click事件。
js部分

import 'swiper/dist/css/swiper.css';import { swiper, swiperSlide } from 'vue-awesome-swiper';// import Swiper from 'swiper'import vueAccordion from './accordion/vue-accordion';let vm = null;export default {name: 'index',data () {return {// bannerOption: {// init:false,pagination: {el: '.swiper-pagination',},autoplay: {delay: 3000,stopOnLastSlide: false,disableOnInteraction: false,},loop: true,notNextTick: true,observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiperobserveParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiperon:{click: function(e){const realIndex = this.realIndex;vm.toBannerDetail(realIndex) //要執(zhí)行函數(shù)}},},}},created () {vm = this;}

總結(jié)

以上是生活随笔為你收集整理的vue swiper click失效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。