一个很很很简单的移动端日历
不知道得多久没有写过文章了,从今年开始心情就一直很浮躁,静不下来…
这次写这个东西其实也很简单,主要是帮其他项目的同事写的,有些东西其实还可以继续封装的,但是我太懒了,就交给jym了。
先上图看看效果吧
主要依赖
amfe-flexible
postcss-pxtorem
dayjs
vant
这里主要说一下 amfe-flexible
和 postcss-pxtorem
,这个就是用来做移动端的适配,就像一般UI给的设计稿都是750px的,但是我们在实际开发的时候可能是不同的,所以用这个来做适配,下面是配置文件
postcss.config.js
const autoprefixer = require('autoprefixer');
const px2rem = require('postcss-pxtorem');module.exports = {plugins: [autoprefixer(), px2rem({rootValue: 75, unitPrecision: 5, propList: ['*'], selectorBlackList: [//这里样式需要排除vant组件的,因为vant本身就是移动端的样式了'van-']})],
};
主要逻辑
工具类
这些工具类就是普通的获取月数什么的,没有什么好讲的
calendar.js
// 判断是否周末
export const isWeekend = (date) => {return [0, 6].includes(new Date(date).getDay())
}// 获取年份
export const getDateYear = (date) => {return new Date(date).getFullYear()
}// 获取月份
export const getDateMonth = (date) => {return new Date(date).getMonth() + 1
}// 获取月份天数
export const getMonthDay = (date) => {let year = new Date(date).getFullYear()let month = new Date(date).getMonth() + 1return new Date(year, month, 0).getDate()
}// 获取月份第一天是周几
export const getMonthFirstDayOrder = (date) => {let year = new Date(date).getFullYear()let month = new Date(date).getMonth()return new Date(year, month, 1).getDay()
}// 获取上个月有多少天
export const getPrevMonthDay = (date) => {let year = new Date(date).getFullYear()let month = new Date(date).getMonth()if (month === 0) {year--month = 12}return new Date(year, month, 0).getDate()
}
月份处理
这里我是采用二维数组的方式来处理每周的数据,而且我们处理月份的时候需要考虑下面几点
- 普通月份处理(这不是说废话吗),即每个月的第一天是星期几,排在第几位
- 上个月/下个月处理,上个月是几月份,多少天,是否在同一年(下个月同理)
- 周末(这里就不考虑节假日什么的了)
- 要显示多少周,最多可能有6周(1号在周六,因为我这里是以周日为第一位,然后有31天的情况)
下面就是主要的逻辑处理代码了
calendar.vue
// 初始化日历数据initMonthData(date) {this.dateArr = [[], [], [], [], [], []]// 每个月第一天排在第几位let firstDayOrder = getMonthFirstDayOrder(date)// 选择器选择的年份let selectedYear = getDateYear(date)// 选择器选择的月份let selectedMonth = getDateMonth(date)// 选择器选择的月份天数let selectedMonthDay = getMonthDay(date)// 选择器选择的月份的上个月的总天数let prevMonthDay = getPrevMonthDay(date)// 月份渲染记数let selectedCountDay = 0// 下个月月份渲染记数let nextMonthCountDay = 0// 是否下个月let isNextMonth = falsefor (let weekIndex = 0; weekIndex < 6; weekIndex++) {for (let dayIndex = 0; dayIndex < 7; dayIndex++) {if (weekIndex === 0) {// 第一周需要对某一个月第一天做定位if (firstDayOrder <= dayIndex) {// 当前月selectedCountDay += 1this.$set(this.dateArr[weekIndex], dayIndex, {date: new Date(selectedYear,selectedMonth - 1,selectedCountDay),status: {isCurr: true, // 是否当月isPrev: false, // 是否上个月isNext: false, // 是否下个月// 是否周末isWeekend: isWeekend(new Date(selectedYear, selectedMonth - 1, selectedCountDay))}})} else {// 上个月 因为选择月份是当前月 上个月需要减去1 然后new Date()还需要再减去1let prevMonth = selectedMonth === 1 ? 11 : selectedMonth - 2let prevMonthYear =selectedMonth - 1 === 0 ? selectedYear - 1 : selectedYearthis.$set(this.dateArr[weekIndex], dayIndex, {date: new Date(prevMonthYear,prevMonth,prevMonthDay - firstDayOrder + dayIndex + 1),status: {isCurr: false,isPrev: true,isNext: false,isWeekend: isWeekend(new Date(prevMonthYear,prevMonth,prevMonthDay - firstDayOrder + dayIndex + 1))}})}} else {selectedCountDay += 1isNextMonth = selectedCountDay > selectedMonthDayif (!isNextMonth) {// 当前月this.$set(this.dateArr[weekIndex], dayIndex, {date: new Date(selectedYear,selectedMonth - 1,selectedCountDay),status: {isCurr: true,isPrev: false,isNext: false,isWeekend: isWeekend(new Date(selectedYear, selectedMonth - 1, selectedCountDay))}})} else {// 下个月let nextMonth = selectedMonth === 12 ? 0 : selectedMonthlet nextYear =selectedMonth === 12 ? selectedYear + 1 : selectedYearnextMonthCountDay += 1this.$set(this.dateArr[weekIndex], dayIndex, {date: new Date(nextYear, nextMonth, nextMonthCountDay),status: {isCurr: false,isPrev: false,isNext: true,isWeekend: isWeekend(new Date(nextYear, nextMonth, nextMonthCountDay))}})}}}}while (getDateMonth(this.dateArr[this.dateArr.length - 1][0].date) !==selectedMonth) {// 某些月份不用六个星期 去除不需要的数据this.dateArr.pop()}},
部分样式处理
就是根据item里面的状态进行动态class处理
handleDayClass(item, dayIndex, weekIndex) {let classStr = `${item.status.isWeekend || item.status.isNext || item.status.isPrev? ' day_prev_next_weekend': ''}${dayjs(item.date).isSame(dayjs(this.currDate), 'day') ? ' day_curr' : ''}${dayIndex === this.clickDayIndex && weekIndex === this.clickWeekIndex? ' day_active': ''}`return classStr}
然后那个弹窗就是用vant组件的van-popover
,然后再初始化的时候给每一个item设置一个值与对应组件绑定,记得用$set
,不然数据可能是视图不对应。
最后
最近还整理一份JavaScript与ES的笔记,一共25个重要的知识点,对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识,提升工作效率。
有需要的小伙伴,可以点击下方卡片领取,无偿分享
一个很很很简单的移动端日历相关推荐
- 一个入行很长的老鸟给新手的一些建议——转
今天有空,随便写点东西给大家.很久没有混在技术论坛中,记忆里最近一次大概是在5.6年以前. 大学读的是土木,曾经也在建筑工地和设计院实习,我相信我可以把那些事情做好,但完全不是我想要的东西.96年有幸 ...
- 一个不是很了解CS(计算机科学)的人,应从哪里开始自学?
来源:https://www.zhihu.com/question/380375631 编辑:深度学习与计算机视觉 声明:仅做学术分享,侵删 作者:穷码农 https://www.zhihu.com/ ...
- 用vue2.6实现一个抖音很火的【时间轮盘】屏保小DEMO
写在前面: 前段时间看抖音,有人用时间轮盘作为动态的桌面壁纸,一时间成为全网最火的电脑屏保,后来小米等运用市场也出现了[时间轮盘],有点像五行八卦,感觉很好玩,于是突发奇想,自己写一个网页版小DEMO ...
- 一个祸害我很久的东东——事件过滤器之按键触发
一个祸害我很久的东东--事件过滤器之按键触发 下面这个东东其实很常见,也很实用,平时上网的时候对之经常见,以为很简单,当然弄懂后,其实发现,他确实蛮简单的,但就是这小东西害了我好久好久啊.... 就是 ...
- 这是小小本周的第六篇,本篇小小将会介绍一个很古老很古老很古老的为什么系列之不能重写service方法。...
这是小小本周的第六篇,本篇小小将会介绍一个很古老很古老很古老的为什么系列之不能重写service方法. 小小最近看到一年一度的考研,心生感慨,不过,作为一个专科,没法参与今年的考研,但是没关系,小小明 ...
- 我是一个硬盘(很感人)
我是一个硬盘. 在一个普普通通的台式机里工作.别人总认为我们是高科技白领,工作又干净又体面,似乎风光得很.也许他们是因为看到洁白漂亮的机箱才有这样的错觉吧.其实象我们这样的小台式机,工作环境狭迫,里面 ...
- 一个聪明男人的娶人经验,很实在很有道理
一个聪明男人的娶人经验,很实在很有道理 作为一个有着多年生活经验的老男人,我也有话要说.我想,我还是有些经验可以给还在感情路上摸索的兄弟们借鉴的,决不能在自己还没明白什么是婚姻时便摔跟头.希望这些经验 ...
- 谷歌程序员也躺平?说「做巨轮里的一个螺丝钉也很好」
大家好,我是校长. 最近知乎推出了一档面向职场的青年纪实观察的节目,叫:<我所向往的职业啊>. 第一期竟然纪实观察的是程序员这个行业,而这期节目的主人公是 Meta(FaceBook)公司 ...
- 一个做得很好的电子产品测评类网站:Zealer
无意中发现了一个做得很好的电子产品测评类网站--Zealer.http://www.zealer.com/ 站长王自如很有个人魅力.尤其他在老罗发布会点评的那期节目里. 与他类似,我也是做质量评测的, ...
最新文章
- Apache2 + Tomcat6配置负载均衡
- 5分钟轻松教您如果组建100-500路大型拼接监控系统!
- echart vue 图表大小_vue之将echart封装为组件
- 【qduoj - 312】寻找唯一的萌妹(卡时)
- 用最简单的操作,做最精准的AI模型!
- java转俯视图_Tweening / Animating threejs相机到顶视图
- kafka内置分区及自定义分区
- Quartus II 13.1与Modelsim SE的安装
- 微波工程(3)——网络
- fedora linux五笔输入法,ArchLinux 安装五笔输入法
- 计算机双人游戏玩不了,PC上的双人单机游戏
- 2015年6月26日-ps图层蒙版
- CSS学习03:CSS文本属性
- 使用Markdown语法介绍markdown
- C语言初阶知识点思维导图(超大图片、超级详细版)
- 个人永久性免费-Excel催化剂功能第24波-批量发送邮件并指点不同附件不同变量...
- MATLAB读取网页内链接,Matlab使用urlread()读取网页乱码问题
- 查找算法--01 顺序查找和二分查找
- export和import的答疑
- 计算机毕业设计php小说阅读网站