1. The element.ui can slide left and right (or slide up and down) by hand. I looked at the official website and did not provide such a function. I checked some resources on the Internet but did not see it. Later I thought that it was too troublesome to change the plug-in, so I decided to write one by hand. .
2. Idea: Make a monitoring event for the item container of the revolving lantern, monitor and obtain the X coordinate of the finger position startPoint(that is, the distance from the left side of the screen), and then obtain the X coordinate of the end point after the finger slides stopPoint(the starting distance The distance to the left of the screen), and then make a judgment. If the X coordinate distance of the two points is the same startPoint - stopPoint = 0, then the X coordinate distance of the starting point and the end point of the sliding is the same to the left (that is, the operation of sliding up or down straight), If it startPoint - stopPoint > 0is left sliding , startPoint - stopPoint < 0it is right sliding , and when stopPoint is 0, it means there is no sliding, that is, it is clicked. At this time, we need to implement our own page jump and other operations according to our needs. Or slide right, then you can call next() and prev() provided by the revolving lantern to switch items.
Note 1: It should be noted that, because the revolving light itself can be clicked (see the picture above), the items on the left and right sides can be switched. At this time, if you monitor the entire item container, it will cause confusion in the carousel, or cause the item on the item The click method is invalid, so it is necessary to judge whether startPoint and stop are equal or stopPoint is 0. In this case, the user clicks or slides up. In the monitoring method, return directly to execute the click of the item itself. method.
Note 2: In the process of my implementation, I need to reset the startPoint and stopPoint positions after each monitoring, otherwise, if it is not reset, it will cause a bug when sliding is continued next time, which is not our ideal state. For example, after we first slide, stopPoint has a value, and when the position of our second click is not the same as the X coordinate of the first stopPoint, then the system will determine that startPoint and stopPoint are not the same, which will lead to the corresponding left Slide or slide right and then execute the click method. This is not ideal, so we have to reset and return to end the method in time.
3. Implementation code: you can paste it and use it directly
<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;
}
});
}
}
})
The above code is handwritten by myself, no bugs have been found so far, please feel free to chat privately if you have any questions.