Feat:旅居选择日期这里需要加个左右滑动翻页的功能
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
原定时间:{{ originDate }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="calendar">
|
||||
<view class="calendar" @touchstart="onTouchStart" @touchend="onTouchEnd">
|
||||
<view class="calendar-header">
|
||||
<view class="month-nav">
|
||||
<text class="nav-btn" @click="changeMonth(-1)">〈</text>
|
||||
@@ -111,7 +111,9 @@ export default {
|
||||
tempStartDate: null,
|
||||
tempEndDate: null,
|
||||
dateStatusMap: {}, // 存储日期状态
|
||||
selectionState: 'initial' // 'initial' | 'selecting' | 'completed'
|
||||
selectionState: 'initial', // 'initial' | 'selecting' | 'completed'
|
||||
touchStartX: 0,
|
||||
touchStartY: 0
|
||||
}
|
||||
},
|
||||
|
||||
@@ -253,6 +255,28 @@ export default {
|
||||
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) {
|
||||
if (!date) return ''
|
||||
const year = date.getFullYear()
|
||||
@@ -697,4 +721,4 @@ export default {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user