vue 使用 vue-awesome-swipe 实现轮播（工作中遇到了，记录一下，因为遇到很多坑）

swipe官网地址

	**https://www.swiper.com.cn/api/parameters/59.html**

第一次使用的时候遇到很多问题，只是记录一下，方便大家遇到同类问题，借鉴解决

1、第一个问题，版本问题，刚开始用了安装的好几个版本都有问题，后来安装了 vue-awesome-swipe 的4.1.1版本，安装代码如下

	npm install  vue-awesome-swipe@4.1.1 --save

2、vue-awesome-swipe安装后 要安装 swipe，配合vue-awesome-swipe 的4.1.1版本 需要安装4.5.1版本

	npm install  swipe@4.5.1 --save

安装后，开始上代码
具体使用步骤如下：
1、引入样式和控件

	import 'swiper/dist/css/swiper.css'
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
    #在components 引入
    components: {
       Swiper, SwiperSlide,commonGdbfDiv
    },

2、页面写入

# v-if="jpkcDataList.length>0" 是因为，页面初始化得时候，如果数据加载慢，还没有数据得时候，就展示<swiper>,图片加载会有问题，所以，v-if做个判断
<div v-if="jpkcDataList.length>0" class="swiper-container">
	<div class="swiper-wrapper ">
		<swiper @mouseenter.native="swiper_enter(2)" @mouseleave.native="swiper_leave(2)"  ref="mySwiperThumbs1" class="mySwiperThumbs container " :options="swiperThumbs1">
			<swiper-slide style="width:100%;" :key="i" v-for="(item,i) in jpkcDataList">
				<div  style="height: 120px;width: 95%;">
					<img style="width: 100%;height: 100%" :src="item.fileUrl"  class="avatar">
				</div>
			</swiper-slide>
		</swiper>
	</div>
	<!--左箭头。如果放置在swiper外面，需要自定义样式。-->
	<div class="swiper-button-prev"></div>
	<!--右箭头。如果放置在swiper外面，需要自定义样式。-->
	<div class="swiper-button-next"></div>
</div>

3、具体配置

let vm = null;//需要声明一个vm，表明vm指向当前组件，swiper得onClick需要用到
export default {
 data() {
            return {
				 swiperThumbs1: {
                    loop: true,//轮播图自动切换
                    // autoplay:true,
                    autoplay: {
                        disableOnInteraction: false,  //触碰后自动轮播也不会停止
                        delay: 2000,
                    },
                    autoplayDisableOnInteraction : false,
                    grabCursor : true,//设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
                    // delay: 500,
                    loopedSlides: 5, //在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
                    spaceBetween: 12,//在slide之间设置距离（单位px）
                    // centeredSlides: true,
                    slidesPerView: 5, // 显示几个缩略图
                    touchRatio: 0,//触摸比例。触摸距离与slide滑动距离的比率。默认为1，按照1:1的触摸比例滑动。设置为0时，完全无法滑动
                    // slideToClickedSlide: true,//设置为true则点击slide会过渡到这个slide。
                    navigation:{
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    on: {
                        click: function () {
                            // 这里有坑
                            // 需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
                            // console.log(this); // -> Swiper
                            // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
                            // const realIndex = this.realIndex;
                            //sjalDataList是你实际业务得数据，到时候根据你自己得业务改成你自己得就行
                            let index = this.clickedIndex - this.activeIndex + this.realIndex;
                            if (index === vm.sjalDataList.length) {
                                index = 0;
                            } else if (index === vm.sjalDataList.length +1) {
                                index = 1;
                            } else if (index === vm.sjalDataList.length +2) {
                                index = 2;
                            }
                            // 我得到的index就是点击的item在实际数组中的下标index
                            console.log("index==="+index);
                            vm.swiperOnclick(index,"sjyal");
                        }
                    },
                    preventLinksPropagation: false,   // 阻止点击事件冒泡
                },
			}
      	},
      	 methods: {
			swiperOnclick(index,flag){
 				/*swiper控件点击时间*/
 				//index 是 点击得数据得下标，获取到就可以随意操作了 然后写你自己得业务
 				.....
			},
			swiper_enter(flag) {
				//鼠标滑过得时候，停止滚动
				this.$nextTick(() => {
					let swiper ;
					swiper = this.$refs.mySwiperThumbs1.$swiper //mySwiperThumbs1是我绑在元素上面的ref值
					// 计算之后平滑移动到this.swiper.translate需要的速度，并储存下来
					let slideWidth = 187
					this.lastNeedSwiperSpeed = Math.abs(Math.abs(swiper.getTranslate()) - Math.abs(swiper.translate)) / (slideWidth + swiper.params.spaceBetween) * swiper.params.speed
					// setTranslate到当前位置，并停止autoplay
					swiper.setTranslate(swiper.getTranslate())
					swiper.autoplay.stop()
			
				});
			},
			swiper_leave(flag) {
			//鼠标离开控件得时候 开始滚动
				this.$nextTick(() => {
					let swiper ;
					swiper = this.$refs.mySwiperThumbs1.$swiper //mySwiperThumbs1是我绑在元素上面的ref值
					swiper.autoplay.start()
				});
			},
			

		}
    }