关于使用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

<script>
let vm = null;
export default {
  data() {
    return {}
  },
  created() {
    vm = this;
  },

踩坑第三，一个页面使用多个swiper，ref指向同一个，点击一个按钮，页面swiper都在动

原因ref重复了，所以就会这样，可以通过动态绑定ref，然后判断ref的值来进行操作。同时options对应的swiperOption里面的值也需要改为不同的值

踩坑第三，一个页面使用多个swiper时，左右切换按钮不是独立，点击一个，所有的swiper都在动

解决方法： navigation里面class名改为不同的，比较复杂的就是改了需要自己写样式

navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev ',
						
					}
					
navigation: {
						nextEl: '.swiper-button-next-aa',
						prevEl: '.swiper-button-prev-aa',
						
					},

踩坑第四，设置loop为true之后，左右切换不起作用

这个我也不知道原因是什么，我就自己写的左右切换，在点击事件里面使用一下的方法就可以了

！！！！注意我的swiper,是通过this.$ref.XX获取的

let swiper = this.$refs.around.$swiper //around是我绑在元素上面的ref值
swiper.slideTo(swiper.activeIndex-2, 1000) // 这边的+,-你们就自己试吧
swiper.autoplay.start() //这里写这一句的原因是因为，不写，点击它移动之后就停止滚动了

踩坑第五 ， 电影胶片效果

不管怎么样设置都会有停顿的效果，因为css设置的是ease-out 需要我们在css里面重新设置一下，主要