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の位置をリセットする必要があります。リセットしないと、次にスライドを続行したときにバグが発生し、理想的な状態ではありません。たとえば、最初にスライドした後、stopPointには値があり、2回目のクリックの位置が最初のstopPointのX座標と同じでない場合、システムはstartPointとstopPointが同じではないと判断し、対応する左に移動します。スライドまたは右にスライドしてからクリックメソッドを実行します。これは理想的ではないため、メソッドをリセットして時間内に終了する必要があります。
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;
}
});
}
}
})
上記のコードは私が手書きで作成したもので、今のところバグは発見されていません。ご不明な点がございましたら、お気軽に非公開でチャットしてください。