<el-carousel height="512px" class="el_carousel" ref="slideCarousel">
<div @touchstart="start($event)" @touchmove="move($event)">
<el-carousel-item v-for="(item, index) in figureList" :key="index">
<div class="list">
{{item}}
</div>
</el-carousel-item>
</div>
</el-carousel>
<script lang="ts" setup>
const slideCarousel = ref(null)
const startX = ref('')
const startY = ref('')
const moveY = ref('')
const moveX = ref('')
const startTime = ref('')
const start=(e)=> {
startX.value = e.touches[0].clientX;
startY.value = e.touches[0].clientY;
}
const move=(e)=> {
moveX.value = e.touches[0].clientX;
moveY.value = e.touches[0].clientY;
var nowtime = new Date().getTime();
if (startTime.value == undefined || nowtime > startTime.value) {
if (startX.value - moveX.value <= 0) { // 右滑触发
prev();
return false;
} else {
next();
return false;
}
}
}
const prev = ()=> {
slideCarousel.value.prev();
startTime.value = new Date().getTime() + 500;
}
const next=()=> {
slideCarousel.value.next();
startTime.value = new Date().getTime() + 500;
}
</script>
