template：div id=calendar_content class=calendar_content @touchstart=handleStart @touchmove=handleMove @touchend=handleEnddiv id=calendar_content_wrapper_prev class=calendar_content_wr...
template：
<div id="calendar_content" class="calendar_content" @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd">
<div id="calendar_content_wrapper_prev" class="calendar_content_wrapper prev">
<div class="week_wrap" v-for="(week, index) in prevDaysArr" :key="index">
<div class="day_wrap" v-for="(day, indexDay) in week" :key="indexDay" :class="[6, 7].includes(day.week) ? 'rest_day' : ''">
<div @click="changeActiveDay(day)">
<p class="day_text" :class="activeDay === day.timeStr ? 'active_day' : ''">{{day.timeStr ? new Date(day.timeStr).getDate() : ''}}</p>
</div>
<template v-if="day.id">
<span v-if="day.status == 0" class="normalCircle"></span>
<span v-else class="abnormalCircle"></span>
</template>
</div>
</div>
</div>
<div id="calendar_content_wrapper" class="calendar_content_wrapper middle">
<div class="week_wrap" v-for="(week, index) in daysArr" :key="index">
<div class="day_wrap" v-for="(day, indexDay) in week" :key="indexDay" :class="[6, 7].includes(day.week) ? 'rest_day' : ''">
<div @click="changeActiveDay(day)">
<p class="day_text" :class="activeDay === day.timeStr ? 'active_day' : ''">{{day.timeStr ? new Date(day.timeStr).getDate() : ''}}</p>
</div>
<template v-if="day.id">
<span v-if="day.status == 0" class="normalCircle"></span>
<span v-else class="abnormalCircle"></span>
</template>
</div>
</div>
</div>
<div id="calendar_content_wrapper_next" class="calendar_content_wrapper next">
<div class="week_wrap" v-for="(week, index) in nextDaysArr" :key="index">
<div class="day_wrap" v-for="(day, indexDay) in week" :key="indexDay" :class="[6, 7].includes(day.week) ? 'rest_day' : ''">
<div @click="changeActiveDay(day)">
<p class="day_text" :class="activeDay === day.timeStr ? 'active_day' : ''">{{day.timeStr ? new Date(day.timeStr).getDate() : ''}}</p>
</div>
<template v-if="day.id">
<span v-if="day.status == 0" class="normalCircle"></span>
<span v-else class="abnormalCircle"></span>
</template>
</div>
</div>
</div>
</div>
data:
nowDay: '',
nowWeekDay: '',
prevDaysArr: [],
daysArr: [],
nextDaysArr: [],
activeDay: '',
activeDayInfo: {},// 坐标
startClientX: '',
isReset: false,
methods：
// 组装查询月份的数组
assembleDayArr (key, date) {
let allDays = this.getMonthDay(date || this.nowDay);
// 查询每周一的下标
let indexArr = [];
allDays.map((val, index) => {
if(val.week === 1){
indexArr.push(index);
}
});
// 如果第一天正好是 周一 则剔除indexArr[0]
if(indexArr[0] === 0){
indexArr.splice(0, 1);
};
// 查询有几周
let weeks = indexArr.length + 1;
// 将 每周塞进数组
let arr = [];
for(let i = 0;i < weeks;i++){
if(i === 0){
arr[i] = allDays.slice(0, indexArr[0]);
}else{
arr[i] = allDays.slice(indexArr[i-1], indexArr[i]);
}
if(arr[i].length < 7 && arr[i][0].week === 1){
let diff = 7 - arr[i].length;
for(let j = 0;j < diff;j++){
arr[i].push({});
}
}else if(arr[i].length < 7 && arr[i][0].week !== 1){
let diff = 7 - arr[i].length;
for(let j = 0;j < diff;j++){
arr[i].unshift({});
}
}
};
this[key] = arr;
},
// 选中日期改变事件
changeActiveDay (day) {
if(day.timeStr && day.timeStr !== this.activeDayInfo.timeStr){
this.activeDay = day.timeStr;
this.activeDayInfo = {...day};
this.nowDay = day.timeStr;
this.nowWeekDay = this.findNowWeek();
}
},
// 头部时间修改
changeMonth (flag, key) {
let resultMonth;
let nowChooseMonth = new Date(this.nowDay).getMonth();
if(flag === 'reduce'){
resultMonth = new Date(this.nowDay).setMonth(nowChooseMonth - 1, 1);
}else {
resultMonth = new Date(this.nowDay).setMonth(nowChooseMonth + 1, 1);
if(resultMonth > new Date().getTime()){
this.$toast.fail('不能选择未来月份');
return;
};
};
// 设置头部显示日期 查看是否是当前月份
if(dateFormat(new Date(), 'yyyy-MM') === dateFormat(new Date(resultMonth), 'yyyy-MM')){
this.nowDay = dateFormat(new Date(), 'yyyy-MM-dd');
}else{
this.nowDay = dateFormat(new Date(resultMonth), 'yyyy-MM-01');
};
this.activeDay = this.nowDay;
this.nowWeekDay = this.findNowWeek();
this.assembleDayArr(key || 'daysArr');
this.getList();
},
// 滑动开始
handleStart (e) {
this.startClientX = e.changedTouches[0].clientX;
},
// 滑动中
handleMove (e) {
e.preventDefault();
// isReset 防止过多次 计算前后数组;
if(!this.isReset && Math.abs(e.changedTouches[0].clientX - this.startClientX) > 1){
let nowChooseMonth = new Date(this.nowDay).getMonth();
let prevMonth = new Date(this.nowDay).setMonth(nowChooseMonth - 1);
let nextMonth = new Date(this.nowDay).setMonth(nowChooseMonth + 1);
this.assembleDayArr('prevDaysArr', dateFormat(new Date(prevMonth), 'yyyy-MM-dd'));
this.assembleDayArr('nextDaysArr', dateFormat(new Date(nextMonth), 'yyyy-MM-dd'));
this.isReset = true;
}
let dom = document.getElementById('calendar_content');
dom.style.marginLeft = (e.changedTouches[0].clientX - this.startClientX) + 'px';
},
// 滑动结束
handleEnd (e) {
let diffX = e.changedTouches[0].clientX - this.startClientX;
let dom = document.getElementById('calendar_content');
if(Math.abs(diffX) === 0){
return;
}
if(Math.abs(diffX) > 100){
if(diffX < 0){
let nowChooseMonth = new Date(this.nowDay).getMonth();
let resultMonth = new Date(this.nowDay).setMonth(nowChooseMonth + 1);
if(resultMonth > new Date().getTime()){
goBack(dom, diffX);
this.$toast.fail('不能选择未来月份');
return;
};
}
let animation = document.getElementById("calendar_content").animate([
{ marginLeft: `${diffX}px`},
{ marginLeft: diffX > 0 ? '7.5rem' : '-7.5rem'}
], {
duration: 500,
delay: 0
});
animation.play();
setTimeout(() => {
dom.style.marginLeft = 0;
if(diffX > 0){
this.changeMonth('reduce', 'daysArr');
};
if(diffX < 0){
this.changeMonth('plus', 'daysArr');
};
this.isReset = false;
}, 501);
}else{
goBack(dom, diffX);
};
// 回到远点 手指移动距离不超过100 以及 不能选择未来月份情况
function goBack (rDom, reference) {
let animation = document.getElementById("calendar_content").animate([
{ marginLeft: `${reference}px`},
{ marginLeft: 0}
], {
duration: 500,
delay: 0
});
animation.play();
setTimeout(() => {
rDom.style.marginLeft = 0;
}, 501)
}
},
// 返回文字 星期几
findNowWeek () {
let nowWeek = new Date(this.nowDay).getDay();
let weekInfo = {
0: '星期日',
1: '星期一',
2: '星期二',
3: '星期三',
4: '星期四',
5: '星期五',
6: '星期六',
};
return weekInfo[nowWeek];
},
// 获取 月份 对应的所有日期
getMonthDay (date) {
let now = new Date(date);
let current_month_num = this.mGetDate(date);
let current_month = [];
for (let i = 1; i <= current_month_num; i++) {
let day = now.setDate(i);
let everyDay = dateFormat(new Date(day), 'yyyy-MM-dd');
current_month.push({
timeStr: everyDay,
week: new Date(everyDay).getDay() === 0 ? 7 :new Date(everyDay).getDay(),
foreInfo: {},
afterInfo: {},
});
};
return current_month;
},
// 获取当前月的天数
mGetDate (date) {
var date = new Date(date);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var d = new Date(year, month, 0);
return d.getDate();
},
css:
.calendar_content{
position: relative;
width: 22.5rem;
// top: .6rem;
left: -7.5rem;
display: flex;
.calendar_content_wrapper{
flex: 1;
&.prev{
left: 0;
}
&.middle{
left: 7.5rem;
}
&.next{
right: 0;
}
}
}
.week_wrap{
display: flex;
.day_wrap{
flex: 1;
&.rest_day{
color: #BABABA;
}
p{
margin: .1rem auto;
&.day_text{
width: .54rem;
height: .54rem;
line-height: .54rem;
border-radius: 100%;
}
&.active_day{
background: #3f6ad3;
color: white;
}
}
}
}
沃梦达教程
本文标题为：基于vue手写仿钉钉 滑动日历
基础教程推荐
猜你喜欢
- Ajax发送和接收请求 2022-12-15
- Javascript Bootstrap的网格系统,导航栏和轮播详解 2023-08-11
- cocos creator游戏实现loading加载页面，游戏启动加载动画 2022-10-29
- 在实战中可能碰到的几种ajax请求方法详解 2023-02-01
- HTML clearfix清除浮动讲解 2022-11-20
- 使用ajax跨域调用springboot框架的api传输文件 2023-02-23
- Ajax+smarty技术实现无刷新分页 2022-12-15
- uniapp开发微信小程序自定义顶部导航栏功能实例 2022-10-21
- 关于Ajax跨域问题及解决方案详析 2023-02-23
- JS滚动到顶部踩坑解决记录 2023-07-10
