vue swiper click失效

HTML部分


        
       

在 loop 开启的时候,dom 绑定事件是有问题的。因为在loop模式下slides前后会复制若干个slide,从而形成一个环路,但是却不会复制绑定在dom上的click事件。
在swiper中的回调函数添加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自己或子元素时,自动初始化swiper
                  observeParents:true,//修改swiper的父元素时,自动初始化swiper
                  on:{
                    click: function(e){
                      const realIndex = this.realIndex;
                      vm.toBannerDetail(realIndex)    //要执行函数
                    }
        
                  },
                },
           
          }
        },
        created () {
          vm = this;
        }

你可能感兴趣的:(笔记)