Element.ui【走马灯】实现用手指可以左右滑动

1、element.ui实现用手可以左右滑动（或上下滑动），看了一下官网没有提供这样的功能，上网上查了一些资源也没有看到，后来想着换插件太麻烦了，决定手写一个。

2、思路：为走马灯的item容器做一个监听事件，监听并获取到手指落点位置的X坐标startPoint（也就是距离屏幕左侧的距离），再获取到手指滑动后终点的X坐标stopPoint（抬起点距离屏幕左侧的距离），然后进行判断，如果两个点X坐标的距离相同即startPoint - stopPoint = 0，那么说明滑动的起点和终点X坐标距离左侧是相同的（也就是直着上滑或下滑的操作），如果startPoint - stopPoint > 0是左滑，startPoint - stopPoint < 0则是右滑，而当stopPoint为0时说明没有滑动，也就是单击的情况，此时我们要根据自己的需求，实现自己的页面跳转等操作，根据上面知道左滑还是右滑那么可以调用走马灯为我们提供的next()和prev()进行切换item的操作。

注意1：需要注意的是，因为本身走马灯是可以点击（看上图）左右侧的item是可以切换的，而此时如果监听整个item容器的话，会造成轮播错乱，或是导致item上的click方法失效，所以就要先进行判断startPoint和stop是否相等或者stopPoint为0的情况，该情况下就就说明用户单击或者上滑的操作，在监听方法中直接return，去执行本身item的click方法。

注意2：在我实现的过程中需要每次监听之后都要将startPoint和stopPoint的位置重置，否则如果不重置的话，会导致下一次继续滑动的时候出现bug，导致不是我们理想的状态，例如，我们第一次滑动以后stopPoint有值，而当我们第二次单击的位置不是和第一次的stopPoint的X坐标相同，那么系统就会判定startPoint和stopPoint不相同就会导致相应的左滑或右滑然后再去执行click方法，这是不理想的状态，所以我们要及时的reset并return结束方法。

3、实现代码：可以贴上去直接用

<div id="app">
	<template>
		<el-carousel :interval="4000" type="card" arrow="never" ref="carousel">
			<el-carousel-item v-for="item in carouseData" :key="item.id">
				<img class="element-img" alt="" :src="item.url">
			</el-carousel-item>
		</el-carousel>
	</template>
</div>

var vm = new Vue({
    
    
	el:"#app",
	data(){
    
    },
	mounted:{
    
    
		this.slideBanner();
	},
	methods:function(){
    
    
		slideBanner:function(){
    
    
			//选中item的盒子
			var box = document.querySelector('.el-carousel__container');
		    //手指起点X坐标
		    var startPoint = 0;
			//手指滑动重点X坐标
			var stopPoint = 0;
			
			//重置坐标
			var resetPoint =  function(){
    
    
				startPoint = 0;
				stopPoint = 0;
			}
		    
		    //手指按下
		    box.addEventListener("touchstart",function(e){
    
    
		    	//手指按下的时候停止自动轮播
		    	vm.stopAuto();
		    	//手指点击位置的X坐标
		        startPoint = e.changedTouches[0].pageX;
		    });
		    //手指滑动
		    box.addEventListener("touchmove",function(e){
    
    
		    	//手指滑动后终点位置X的坐标
		        stopPoint = e.changedTouches[0].pageX;
		    });
		    //当手指抬起的时候，判断图片滚动离左右的距离
		   	box.addEventListener("touchend",function(e){
    
    
		   		console.log("1："+startPoint);
		   		console.log("2："+stopPoint);
				if(stopPoint == 0 || startPoint - stopPoint == 0){
    
    
					resetPoint();
		   			return;
		   		}
		   		if(startPoint - stopPoint > 0){
    
    
		   			resetPoint();
		   			vm.$refs.carousel.next();
		   			return;
		   		}
		   		if(startPoint - stopPoint < 0){
    
    
		   			resetPoint();
		   			vm.$refs.carousel.prev();
		   			return;
		   		}
		    });
		}
	}
})

上面代码是自己手写，目前没发现什么bug，有问题欢迎随时私聊讨论。