日历实现左右滑动实现切换日历

[missyouliu]

优秀示例
<template>
	<!-- 日历滚动插件 -->
	<view class="zsy_calendar">
		<!-- 日历顶部信息 -->
		<view class="calendar_info">
			<text class="desc">
        {{ getAssignDateInfo(false, 0) +'年' }}{{ getAssignDateInfo(false, 1) }}月{{ getAssignDateInfo(false, 2) }}日
			</text>
<!--			<text v-show="showBackToTodayBtn" class="backToToday" :style="{color: dateActiveColor}" @tap="goToDate()">回到今天</text>-->
		</view>
		
		<!-- 日历周数 -->
		<view class="calendar_week">
			<view v-for="(item, index) in week" :key="index" class="calendar_week__item">{{ item }}</view>
		</view>
		
		<!-- 日历轮播 -->
		<view class="calendar_swiper">
			<swiper
				key="normalSwiper"
				circular
				:style="{height: swiperHeight}"
				:current="current"
				:duration="duration"
				:skip-hidden-item-layout="true"
				@change="e => current = e.detail.current"
			>
				<swiper-item v-for="(swiper, swiperIndex) in 3" :key="swiperIndex" class="swiper-item">
					<DateBox
						:dates="getcurCalendarDates[swiperIndex]"
						:cellHeight="cellHeight"
						:selectedDate="selectedDate"
						:dateActiveColor="dateActiveColor"
						:swiperMode="swiperMode"
						:showActive="emitTimer === null"
						@chooseDate="chooseDate"
					/>
				</swiper-item>
			</swiper>
		</view>
	
		<!-- 日历切换模式 -->
		<view class="calendar_toggle" @tap="swiperMode = swiperMode === 'open' ? 'close' : 'open'">
			<view class="icon" :class="{down: swiperMode === 'close'}"></view>
		</view>
	</view>
</template>

<script>
	import { parseTime, deepClone } from './js/utils.js'
	import DateBox from './dateBox.vue'
	export default {
		name: 'ZsyCalendar',
		components: {
			DateBox
		},
		props: {
			duration: { // 轮播图动画时长
				type: Number,
				default: 300
			},
			cellHeight: { // 一列的高度
				type: Number,
				default: 60
			},
			dateActiveColor: { // 日期选中颜色
				type: String,
				default: '#FE6601'
			},
			sundayIndex: { // 星期天所在索引，0表示第一个、6表示最后一个
				type: Number,
				default: 6
			},
			mode: { // 日历模式
				type: String,
				default: 'open'
			},
			changeSetDefault: { // 月份切换时是否显示一号还是当前月份选中高亮
				type: Boolean,
				default: false
			},
			defaultSelectedDate: { // 默认选中日期
				type: String | null,
				default: null
			},
			showArrowBtn: { // 是否显示左右切换按钮
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				today: parseTime(new Date(), '{y}-{m}-{d}'), // 今天日期
				selectedDate: null, // 选中日期
				week: [], // 日历周数
				current: 1, // 当前日历轮播默认显示索引
				calendarSwiperDates: [], // 日历轮播日期信息
				swiperChangeByClick: false, // 是否通过点击上月份或下月份的日期进行轮播切换
				swiperMode: this.mode, // 日历轮播显示模式 open：展开 close：收缩
				monthDateCache: {}, // 月份日期缓存数据
				emitTimer: null, // 日期改变向父级传递当前选中日期计时器
				dateClick: false // 是否进行了日期的点击选择
			}
		},
		computed: {
			// 返回当前日期信息（展开状态下为每月，收缩状态下为每周）
			getcurCalendarDates() {
				if (this.swiperMode === 'open') { // 展开
          console.log("展开日期",this.calendarSwiperDates)
					return this.calendarSwiperDates
				} else {
					return this.getCalendarShrinkSwiperDates()
				}
			},
			// 计算选中日期的上月、本月、下月的年月信息
			getAdjacentYMD() {
				const year = this.getAssignDateInfo(false, 0)
				const month = this.getAssignDateInfo(false, 1)
				const prev = `${month === 1 ? year - 1 : year}-${month === 1 ? 12 : month - 1}`
				const cur = `${year}-${month}`
				const next = `${month === 12 ? year + 1 : year}-${month === 12 ? 1 : month + 1}`
				return [prev, cur, next]
			},
			/* 获取指定日期信息
			isToday: 是否获取当天的信息还是选中日期的信息
			index: 0 表示年份 1 表示月份 2 表示日期 */
			getAssignDateInfo() {
				return (isToday, index) => {
					return (isToday ? this.today : this.selectedDate).split('-')[index] * 1
				}
			},
			// 是否显示回到今天按钮
			showBackToTodayBtn() {
				return this.getAssignDateInfo(false, 0) !== this.getAssignDateInfo(true, 0) || this.getAssignDateInfo(false, 1) !== this.getAssignDateInfo(true, 1)
			},
			// 返回轮播图高度
			swiperHeight() {
				const normalHeight = (this.calendarSwiperDates[this.current] || []).length / 7 * (this.cellHeight + 20) + 'rpx'
				const shrinkHeight = this.cellHeight + 20 + 'rpx'
				return this.swiperMode === 'open' ? normalHeight : shrinkHeight
			}
		},
		watch: {
			// 展开日历轮播切换
			current(newV, oldV) {
				if (newV === 0 && oldV === 2) { // 右滑
					this.swiperChange(1)
					return
				}
				if (newV === 2 && oldV === 0) { // 左滑
					this.swiperChange(-1)
					return
				}
				if (newV > oldV) { // 右滑
					this.swiperChange(1)
				} else { // 左滑
					this.swiperChange(-1)
				}
			},
			selectedDate: {
				deep: true,
				handler(newV, oldV) {
					// 判断月历日期数据需不需要改变
					if (this.swiperMode === 'close') {
						setTimeout(() => {
							this.generateAdjacentMonthDate() // 生成临近月份日期缓存数据
						}, this.duration);
					}
					if (newV && (oldV === null || this.dateClick)) { // 初始化/日历点击选择时直接返回
						this.emitDate()
						this.dateClick = false
					} else { // 其它情况做防抖处理
						if (this.emitTimer !== null) {
							clearTimeout(this.emitTimer)
							this.emitTimer = null
						}
						this.emitTimer = setTimeout(() => {
							this.emitDate()
							this.emitTimer = null
						}, this.duration + 200)
					}
				}
			}
		},
		created() {
			this.init() // 初始化数据
		},
		methods: {
			// 初始化数据
			init() {
				if (this.selectedDate === null) { // 默认选中日期为当天
					this.selectedDate = this.defaultSelectedDate || this.today
				}
				this.initWeek() // 初始化要显示的周数
				this.generateAdjacentMonthDate() // 生成临近月份日期缓存数据
			},
			// 初始化周数
			initWeek() {
				const normalWeek = ['日', '一', '二', '三', '四', '五', '六'] // 正常周数
				const sIndex = this.sundayIndex < 0 ? 0 : this.sundayIndex >= normalWeek.length ? normalWeek.length - 1 : this.sundayIndex
				normalWeek.unshift(...normalWeek.slice(-sIndex))
				normalWeek.length = 7
				this.week = normalWeek
			},
			// 根据current自动对轮播数据进行衔接排序
			adjacentSortByCurrent(prev, cur, next) {
				let arr
				if (this.current === 0) {
					arr = [cur, next, prev]
				} else if (this.current === 1) {
					arr = [prev, cur, next]
				} else if (this.current === 2) {
					arr = [next, prev, cur]
				}
				return arr
			},
			// 生成本月、上个月、下个月日期信息
			generateAdjacentMonthDate() {
				const arr = []
				this.getAdjacentYMD.map(YM => {
					const [year, month] = YM.split('-')
					arr.push(this.generateMonthDateCache(year, month))
				})
				const [prev, cur, next] = arr
				this.calendarSwiperDates = this.adjacentSortByCurrent(prev, cur, next)
				if (this.swiperChangeByClick) {
					this.swiperChangeByClick = false
				}
			},
			// 生成月份日期缓存数据并返回
			generateMonthDateCache(year, month) {
				year = Number(year)
				month = Number(month)
				// 缓存中已存在
				if (this.monthDateCache[`${year}-${month}`]) return this.monthDateCache[`${year}-${month}`]
				let calendarDate = []
				const monthDates = new Date(year, month, 0).getDate() // 获取此月份总天数
				const normalWeek = ['一', '二', '三', '四', '五', '六', '日'] // 正常周数
				const monthFirstDay = normalWeek[new Date(year, month - 1, 0).getDay()] // 获取本月一号为星期几
				const monthFirstDayIndex = this.week.indexOf(monthFirstDay) // 计算本月一号在日历周数中的索引，索引之前的填充上个月的后几天
				// 本月一号在日历中不是第一个位置，需要进行填充
				if (monthFirstDayIndex !== 0) {
					const prevMonthDates = new Date(year, month - 1, 0).getDate() // 获取上一个月份的总天数
					// 填充本月一号之前的数据
					for (let i = 0; i < monthFirstDayIndex; i ++) {
						const item = {
							year: month === 1 ? year - 1 : year,
							month: month === 1 ? 12 : month - 1,
							date: prevMonthDates - i,
							dateFormat: `${month === 1 ? year - 1 : year}-${String(month === 1 ? 12 : month - 1).padStart(2, '0')}-${String(prevMonthDates - i).padStart(2, '0')}`,
							type: 'prev'
						}
						// 判断填充的日期是否包含今天日期
						this.theDateIsToday(item)
						calendarDate.unshift(item)
					}
				}
				// 循环生成当月所有日期
				for (let i = 1; i <= monthDates; i ++) {
					const item = {
						year,
						month,
						date: i,
						isSelected: false,
						dateFormat: `${year}-${String(month).padStart(2, '0')}-${String(i).padStart(2, '0')}`,
						type: 'cur'
					}
					// 今天的日期在不在里面
					this.theDateIsToday(item)
					calendarDate.push(item)
				}
				const residue = calendarDate.length % 7
				// 判断是否需要填充下个月的前几天
				if (residue !== 0) {
					for (let i = 1; i <= 7 - residue; i ++) {
						const item = {
							year: month === 12 ? year + 1 : year,
							month: month === 12 ? 1 : month + 1,
							date: i,
							dateFormat: `${month === 12 ? year + 1 : year}-${String(month === 12 ? 1 : month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`,
							type: 'next'
						}
						// 下个月的前几天包含今天
						this.theDateIsToday(item)
						calendarDate.push(item)
					}
				}
				this.monthDateCache[`${year}-${month}`] = deepClone(calendarDate)
				return this.monthDateCache[`${year}-${month}`]
			},
			// 轮播图切换结束
			swiperChange(e) {
				// 切换上个月/下个月，默认选中一号 / 切换上一周/下一周，默认选中第一天
				if (!this.swiperChangeByClick) {
					this.getPrevOrNextDate(e)
				}
				if (this.swiperMode === 'open') { // 展开
					// 通过点击上个月/下个月日期进行切换，不需要默认选中下个月的一号，直接选中点击的那个日期
					setTimeout(() => {
						this.generateAdjacentMonthDate() // // 重新生成临近月份日期缓存数据
					}, this.duration)
				}
			},
			// 判断日期是否为今天
			theDateIsToday(item) {
				if (`${item.year}${item.month}${item.date}` === `${this.getAssignDateInfo(true, 0)}${this.getAssignDateInfo(true, 1)}${this.getAssignDateInfo(true, 2)}`) {
					item.isToday = true
				}
			},
			// 计算收缩时的日历轮播日期信息
			getCalendarShrinkSwiperDates() {
				const [prevYM, curYM, nextYM] = this.getAdjacentYMD
				// 本月日期数据
				const curDates = this.monthDateCache[curYM]
				// 计算当前日期所在行
				const line = Math.floor(curDates.map(item => item.dateFormat).indexOf(this.selectedDate) / 7)
				// 当前周日期信息
				const cur = curDates.slice(line * 7, (line + 1) * 7)
				let prev, next
				/**
				 * 获取上一周日期信息
				 * 注意：当选中日期为第一周要额外判断，如果刚好为日历的第一天，则上一周数据应为上一个月的最后一周，否则为上一个月的倒数第二周
				 */ 
				if (line === 0) {
					// 获取上个月日历数据
					const prevDates = this.monthDateCache[prevYM]
					// 获取上个月的日历行数
					const prevDatesLine = prevDates.length / 7
					if (curDates[0].dateFormat === this.selectedDate) { // 选中日期刚好为日历第一天
						prev = prevDates.slice((prevDatesLine - 1) * 7) // 上个月倒数第一周数据
					} else {
						prev = prevDates.slice((prevDatesLine - 2) * 7, (prevDatesLine - 1) * 7) // 上个月倒数第二周数据
					}
				} else {
					prev = curDates.slice((line - 1) * 7, line * 7)
				}
				/**
				 * 获取下一周日期信息
				 * 注意：当选中日期为最后一周要额外判断，如果刚好为日历的最后一天，则下一周数据应为下一个月的第一周，否则为下一个月的第二周
				 */ 
				if (line + 1 === curDates.length / 7) {
					// 获取下个月的日期数据
					const nextDates = this.monthDateCache[nextYM]
					if (curDates[curDates.length - 1].dateFormat === this.selectedDate) { // 选中日期刚好为日历最后一天
						next = nextDates.slice(0, 7) // 下个月第一周数据
					} else {
						next = nextDates.slice(7, 14) // 下个月第二周数据
					}
				} else {
					next = curDates.slice((line + 1) * 7, (line + 2) * 7)
				}
				return this.adjacentSortByCurrent(prev, cur, next)
			},
			// 手动切换日历
			switchCalendar(type) {
				const currentKey = this.swiperMode === 'close' ? 'shrinkCurrent' : 'current'
				const v = this[currentKey] + (type === 'prev' ? -1 : 1)
				this[currentKey] = v === -1 ? 2 : v === 3 ? 0 : v
			},
			// 获取月的一号日期/周的第一天
			getPrevOrNextDate(type) {
				if (this.swiperMode === 'open') {
					const year = this.getAssignDateInfo(false, 0)
					let month = this.getAssignDateInfo(false, 1)
					month = month + type
					// 判断切换月份时选中当前日期高亮还是一号，若选中当前日期高亮需进行大小判断
					const curActiveDate = this.getAssignDateInfo(false, 2)
					const maxDate = new Date(year, month, 0).getDate()
					const date = this.changeSetDefault ? 1 : curActiveDate > maxDate ? maxDate : curActiveDate
					this.selectedDate = parseTime(new Date(year, month - 1, date), '{y}-{m}-{d}')
				} else {
					let current = this.current + type < 0 ? 2 : this.current + type > 2 ? 0 : this.current + type
					this.selectedDate = this.getcurCalendarDates[current][0].dateFormat
				}
			},
			// 前往某一天 格式 YYYY-MM | YYYY-MM-DD
			goToDate(date = this.today) {
				try {
					if (date.split('-').length < 2 || date.split('-').length > 3) throw '参数有误'
					if (date.split('-').length === 2) {
						date += '-01'
					}
				} catch (err) {
					throw Error('请检查参数是否符合规范')
				}
				this.selectedDate = date
				this.generateAdjacentMonthDate()
			},
			// 日历轮播展开的情况下选择日期
			chooseDate(dateInfo) {
				// 重复点击后续不做处理
				if (dateInfo.dateFormat === this.selectedDate) return false
				if (this.swiperMode === 'open') { // 展开
					// 是否点击了上个月份的后几天或者点击了下个月份的前几天
					if (dateInfo.type !== 'cur') {
						if (dateInfo.type === 'prev') { // 点击了上个月份的后几天，滑到上个月
							this.current = this.current === 0 ? 2 : this.current - 1
						} else { // 点击了下个月份的前几天，滑到下个月
							this.current = this.current === 2 ? 0 : this.current + 1
						}
						// 将选中日期赋值为当前点击的那个日期
						this.swiperChangeByClick = true
					} else {
						this.dateClick = true
					}
				} else { // 收缩
					// 是否点击了上个月份的后几天或者点击了下个月份的前几天
					if (dateInfo.type !== 'cur') {
						// 将选中日期赋值为当前点击的那个日期
						this.swiperChangeByClick = true
					}
					this.dateClick = true
				}
				// 将当前选中的日期清空并选中最新的日期
				this.selectedDate = dateInfo.dateFormat
			},
			// 向父组件传递当前选中数据
			emitDate() {
				const e = {
					selectedDate: this.selectedDate
				}
				this.$emit('change', e)
			}
		}
	}
</script>

<style>
	.zsy_calendar {
    margin-left: 5%;
    margin-right: 5%;
		box-sizing: border-box;
		background-color: rgba(245, 222, 179, 0.55);
		border-radius: 10px;
	}
	
	/* 日历顶部信息 */
	.calendar_info {
		display: flex;
    justify-content: center;
		align-items: center;
	}
	.calendar_info .desc {
    padding-top: 10px;
    padding-bottom: 5px;
		font-size: 14px;
		color: #959595;
	}
	/* 日历顶部信息 */
	
	/* 日历周数 */
	.calendar_week {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		color: #959595;
	}
	.calendar_week .calendar_week__item {
		width: calc(100% / 7);
		text-align: center;
	}
	/* 日历周数 */
	
	/* 日历切换模式 */
	.calendar_toggle {
		position: relative;
		padding: 10rpx 0;
		margin: 10rpx 20rpx 0;
		display: flex;
		justify-content: center;
	}
	.calendar_toggle .icon {
		width: 30rpx;
		height: 30rpx;
		background-image: url('../../static/arrow.png');
		background-size: contain;
		background-repeat: no-repeat;
		margin: 0 auto;
		transform: rotate(0deg);
		transition: all .3s;
	}
	.icon.down {
		transform: rotate(180deg);
	}
	.calendar_toggle::before, .calendar_toggle::after {
		width: calc(50% - 30rpx);
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.calendar_toggle::before {
		left: 0;
	}
	.calendar_toggle::after {
		right: 0;
	}
	/* 日历切换模式 */
</style>```

[Moonofweisheng]

见2024开发计划