vue也可以用,只是要改事件
<template>
<view>
<div class="swiperBox">
<div class="swiper_contaienr">
<div @touchmove="handleTouchMove" @touchstart="handleTouchStart" @touchend="handleTouchEnd"
class="box box1" :class="{active2:selId==2,active3:selId==3}">
</div>
<div @touchmove="handleTouchMove" @touchstart="handleTouchStart" @touchend="handleTouchEnd"
class="box box2" :class="{active2:selId==2,active3:selId==3}">
</div>
<div @touchmove="handleTouchMove" @touchstart="handleTouchStart" @touchend="handleTouchEnd"
class="box box3" :class="{active2:selId==2,active3:selId==3}">
</div>
</div>
</div>
</view>
</template>
<script>
export default {
data() {
return {
selId: 1,
startX: 0,
startY: 0,
isSwipeValid: true,
}
},
methods: {
// 触摸开始
handleTouchStart(event) {
const touch = event.touches[0];
this.startX = touch.clientX;
this.startY = touch.clientY;
this.isSwipeValid = true;
},
// 监测
handleTouchMove(event) {
if (!this.isSwipeValid) {
return; // 如果已经触发过一次滑动事件,则不再处理
}
const touch = event.touches[0];
const moveX = touch.clientX - this.startX;
const moveY = touch.clientY - this.startY;
// 判断滑动是否超过阈值
if (moveX > 10) {
this.isSwipeValid = false; // 标记为已经触发过滑动事件
switch (this.selId) {
case 1:
this.selId = 1
break;
case 2:
this.selId = 1
break;
case 3:
this.selId = 2
break;
}
}
if (moveX < -10) {
this.isSwipeValid = false; // 标记为已经触发过滑动事件
switch (this.selId) {
case 1:
this.selId = 2
break;
case 2:
this.selId = 3
break;
case 3:
this.selId = 3
break;
}
}
},
// 触摸结束
handleTouchEnd() {
this.isSwipeValid = true; // 在滑动结束时重置标识,以便下次滑动可以触发事件
},
}
}
</script>
<style>
.swiperBox {
width: 100%;
height: 200px;
overflow: hidden;
/* background-color: #999; */
}
.swiper_contaienr {
display: flex;
width: 300%;
height: 200px;
overflow: scroll !important;
}
.box {
width: 100%;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
display: flex;
flex-direction: column;
align-items: center;
background-color: red;
}
.box2 {
background-color: antiquewhite;
}
.box3 {
background-color: aqua;
}
.box {
transform: translateX(0%);
transition: all 0.3s;
}
.box.active2 {
transform: translateX(-100%);
}
.box.active3 {
transform: translateX(-200%);
}
</style>