1. El element.ui puede deslizarse hacia la izquierda y hacia la derecha (o hacia arriba y hacia abajo) con la mano. Miré el sitio web oficial y no proporcionó dicha función. Revisé algunos recursos en Internet pero no lo vi. Más tarde pensé que era demasiado problemático cambiar el complemento, así que decidí escribir uno a mano. .
2. Idea: haga un evento de monitoreo para el contenedor de artículos de la linterna giratoria, monitoree y obtenga la coordenada X de la posición del dedo startPoint(es decir, la distancia desde el lado izquierdo de la pantalla), y luego obtenga la coordenada X del punto final después de que el dedo se deslice stopPoint(la distancia inicial La distancia a la izquierda de la pantalla), y luego haga un juicio. Si la distancia de la coordenada X de los dos puntos es la misma startPoint - stopPoint = 0, entonces la distancia de la coordenada X del punto de inicio y el punto final del deslizamiento es la misma a la izquierda (es decir, la operación de deslizarse hacia arriba o hacia abajo en línea recta), Si startPoint - stopPoint > 0se deja deslizamiento , startPoint - stopPoint < 0se corredera derecha , y cuando stopPoint es 0, significa que no hay es deslizante, es decir, se hace clic. en este momento, tenemos que aplicar nuestra propia página de salto y otras operaciones de acuerdo a nuestras necesidades. O deslícese hacia la derecha, luego puede llamar a next () y prev () proporcionados por la linterna giratoria para cambiar elementos.
Nota 1: Debe tenerse en cuenta que, debido a que se puede hacer clic en la luz giratoria en sí (ver la imagen de arriba), los elementos en los lados izquierdo y derecho se pueden cambiar. En este momento, si monitorea todo el contenedor del elemento, causará confusión en el carrusel o causará que el elemento esté en el elemento. El método de clic no es válido, por lo que es necesario juzgar si startPoint y stop son iguales o stopPoint es 0. En este caso, el usuario hace clic o se desliza hacia arriba. En el método de monitoreo, regrese directamente para ejecutar el clic del elemento en sí. método.
Nota 2: En el proceso de mi implementación, necesito restablecer las posiciones startPoint y stopPoint después de cada monitoreo; de lo contrario, si no se restablece, causará un error cuando el deslizamiento continúe la próxima vez, que no es nuestro estado ideal. Por ejemplo, después de que deslizamos por primera vez, stopPoint tiene un valor, y cuando la posición de nuestro segundo clic no es la misma que la coordenada X del primer stopPoint, entonces el sistema determinará que startPoint y stopPoint no son lo mismo, lo que conducirá a la izquierda correspondiente. Deslice o deslice hacia la derecha y luego ejecute el método de clic. Esto no es ideal, por lo que tenemos que reiniciar y volver para finalizar el método a tiempo.
3. Código de implementación: puedes pegarlo y usarlo directamente
<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;
}
});
}
}
})
El código anterior está escrito a mano por mí mismo, no se han encontrado errores hasta ahora, no dude en chatear en privado si tiene alguna pregunta.