关于使用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里面重新设置一下，主要

<style>
.swiper-wrapper{
        -webkit-transition-timing-function :linear !important;
        -moz-transition-timing-function :linear !important;
        -ms-transition-timing-function: linear !important;
        -o-transition-timing-function: linear !important;
        transition-timing-function :linear !important;
        margin: 0 auto !important;
	}
</style>

swiperOption里面的值

swiperOptions: {
					notNextTick:true,
					slidesPerView: 8,
					initialSlide:0,
					spaceBetween: 30,
					updateOnWindowResize: true,
					speed:3000,
					loop:true,
					autoplay:true,
					autoplay: {
						delay:0,
						disableOnInteraction: false,
						disableOnInteraction: true
					},
					
					navigation: {
						nextEl: '.swiper-button-next-aa',
						prevEl: '.swiper-button-prev-aa',
						
					},
    
}

就是像电影胶片一样的效果啦~~~

然后鼠标划入停止，划出播放，

我这里把事件写在swiper上的,要加native哦，不加native事件不生效

<swiper  :class="id=='around'?'swiper':'swipers'" :options="id=='around'?swiperOptions:swiperOption" :ref="id" :id='id' @mouseover.native="enterThePhoto" @mouseleave.native="leaveThePhoto">

鼠标划入，划出事件，注意不要照搬，我这里的around是我给自己的swiper绑定的ref

        enterThePhoto(){
				let swiper = this.$refs.around.$swiper
				// setTranslate到当前位置，并停止autoplay
				swiper.setTranslate(swipers.getTranslate())
				swiper.autoplay.stop()
		},
		leaveThePhoto(){
					let swiper = this.$refs.around.$swiper
					swiper.autoplay.start()
					// console.log(swiper.autoplay)
		},

未完待续。。。。