Feat:旅居选择日期这里需要加个左右滑动翻页的功能

This commit is contained in:
linxi
2026-02-05 17:41:09 +08:00
parent 23286ae940
commit 39d9c1a76a
+27 -3
View File
@@ -14,7 +14,7 @@
原定时间:{{ originDate }} 原定时间:{{ originDate }}
</view> </view>
</view> </view>
<view class="calendar"> <view class="calendar" @touchstart="onTouchStart" @touchend="onTouchEnd">
<view class="calendar-header"> <view class="calendar-header">
<view class="month-nav"> <view class="month-nav">
<text class="nav-btn" @click="changeMonth(-1)">〈</text> <text class="nav-btn" @click="changeMonth(-1)">〈</text>
@@ -111,7 +111,9 @@ export default {
tempStartDate: null, tempStartDate: null,
tempEndDate: null, tempEndDate: null,
dateStatusMap: {}, // 存储日期状态 dateStatusMap: {}, // 存储日期状态
selectionState: 'initial' // 'initial' | 'selecting' | 'completed' selectionState: 'initial', // 'initial' | 'selecting' | 'completed'
touchStartX: 0,
touchStartY: 0
} }
}, },
@@ -253,6 +255,28 @@ export default {
this.currentMonth = newMonth this.currentMonth = newMonth
}, },
onTouchStart(e) {
if (!e || !e.changedTouches || !e.changedTouches.length) return
this.touchStartX = e.changedTouches[0].clientX
this.touchStartY = e.changedTouches[0].clientY
},
onTouchEnd(e) {
if (!e || !e.changedTouches || !e.changedTouches.length) return
const touchEndX = e.changedTouches[0].clientX
const touchEndY = e.changedTouches[0].clientY
const deltaX = touchEndX - this.touchStartX
const deltaY = touchEndY - this.touchStartY
if (Math.abs(deltaX) <= Math.abs(deltaY)) return
const minDistance = 50
if (Math.abs(deltaX) < minDistance) return
if (deltaX < 0) {
this.changeMonth(1)
} else {
this.changeMonth(-1)
}
},
formatDate(date) { formatDate(date) {
if (!date) return '' if (!date) return ''
const year = date.getFullYear() const year = date.getFullYear()
@@ -697,4 +721,4 @@ export default {
transform: scale(1); transform: scale(1);
} }
} }
</style> </style>