关于使用vue-awesome-swiper的一些踩坑记录

引入方法

npm install  vue-awesome-swiper
 
cnpm inatall vue-awesome-swiper

在main.js里面引入


import vueSwiper from 'vue-awesome-swiper'
 
import 'swiper/dist/css/swiper.css'  //引入样式

组件引入方式


import { swiper, swiperSlide } from "vue-awesome-swiper";
 
require("swiper/dist/css/swiper.css");
 
components: {
 
swiper,
 
swiperSlide
 
}

踩坑第一 ,如果使用了loop:true,点击事件不生效

原因: loop模式下会在slides前后复制若干个 slide 但是这个复制只是针对 dom 不会带上事件的 所以不能在dom上 直接绑定事件 绑定则无效

解决方法: 在swiperOption里面的on里写点击事件,使用cilck,后面复制的内容点击事件就不生效了

swiperOption: {
        loop: true,
        resistanceRatio: 0,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        on: {
          tap(event) {
            const { realIndex } = this;
            vm.handleClickSlide(realIndex);
          },
        },
      },
      bannerList: [],
    };

如果需要传值的话,可以在html元素上面使用:data-XXX=‘dddd’,在event.target,dataset.XXX获取,我就是这么绑值的,比较复杂的是,可能swipe-silder里面的每个元素都需要绑一下,因为没有事件委托

踩坑第二 , swiperOption里面on的this指向问题

在swiperOption里面on的this为undefine,需要在外部定义vm,然后在created中给vm赋值this


                    
                    

你可能感兴趣的:(vue.js,bootstrap)