70 lines
1.3 KiB
Vue
70 lines
1.3 KiB
Vue
<template>
|
|
<view class="container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
|
|
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
|
|
<swiper-item>
|
|
1
|
|
</swiper-item>
|
|
<swiper-item>
|
|
2
|
|
</swiper-item>
|
|
<swiper-item>
|
|
3
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
startX: 0,
|
|
startY: 0,
|
|
isDragging: false
|
|
};
|
|
},
|
|
methods: {
|
|
// 手指触摸开始
|
|
onTouchStart(e) {
|
|
this.startX = e.touches[0].clientX;
|
|
this.startY = e.touches[0].clientY;
|
|
this.isDragging = false;
|
|
},
|
|
// 手指滑动
|
|
onTouchMove(e) {
|
|
const moveX = e.touches[0].clientX - this.startX;
|
|
const moveY = e.touches[0].clientY - this.startY;
|
|
|
|
if (Math.abs(moveX) > Math.abs(moveY)) {
|
|
// 横向滑动
|
|
this.isDragging = true;
|
|
} else {
|
|
// 纵向滑动
|
|
this.isDragging = true;
|
|
}
|
|
|
|
if (this.isDragging) {
|
|
e.preventDefault(); // 防止页面默认滑动
|
|
}
|
|
},
|
|
// 手指抬起
|
|
onTouchEnd() {
|
|
this.isDragging = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|