完整代码呈现 简单微信小程序日历组件的实现过程

GS 834 2024-08-02

本篇文章给大家带来的内容是关于简单的微信小程序日历组件的实现(附完整代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

最近在做微信小程序项目,其中涉及到日历。一直以来,遇到日历,就是网上随便找个插件,这次心血来潮,想着自己去实现一下。这次不是封装功能强大,健硕完美的组件,只是记录一下,主体思路。更多功能还得根据项目需要,自己去挖掘、实现。(大佬轻喷)

1332032862-5b8c06a3393cc_articlex.gif

思路分析

首先最主要的一点,就是要计算出某年某月有多少天,其中涉及到大小月,闰、平年二月。

其次,弄清楚每月一号对应的是周几。

然后,有时为填充完整,还需显示上月残余天数以及下月开始几天,这些又该如何展示。

最后,根据自己项目需求实现其它细枝末节。

计算每月天数

按照一般思路,[1,3,5,7,8,10,12]这几个月是31天,[2,3,6,9,11]这几个月是30天,闰年2月29天,平年2月28天。每次需要计算天数时,都得如此判断一番。方案可行,而且也是大多数人的做法。但是,这个方法,我却觉得有些繁琐。

其实换一种思路,也未尝不可。时间戳就是一个很好的载体。当前月一号零时的时间戳,与下月一号零时的时间戳之差,不就是当前月天数的毫秒数嘛。

图片.png

看到上述代码,你可能会问,是不是还缺少当月为12月时的特殊判断,毕竟涉及到跨年问题。当然,你无需担心,根据MDN中关于Date的表述,js已经为我们考虑好了这一点

当Date作为构造函数调用并传入多个参数时,如果数值大于合理范围时(如月份为13或者分钟数为70),相邻的数值会被调整。比如 new Date(2013, 13, 1)等于new Date(2014, 1, 1),它们都表示日期2014-02-01(注意月份是从0开始的)。其他数值也是类似,new Date(2013, 2, 1, 0, 70)等于new Date(2013, 2, 1, 1, 10),都表示时间2013-03-01T01:10:00。

计算每月一号是周几

呃,这个就不需要说了吧,getDay()你值得拥有

图片.png

每个月的数据如何展示

如果只是简单展示当月数据,那还是很简单的,获取当月天数,依次遍历,就可以拿到当月所有数据。

图片.png

图片.png

图片.png

至于上下月切换,选择某年某月等功能,无非就是参数变化而已,自己琢磨琢磨即可。

骨架都有了,你想创造什么样的功能还不是手到擒来。

以上就是完整代码呈现 简单微信小程序日历组件的实现过程的详细内容!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序中模板消息定时推送的详细图文解析
下一篇:微信小程序发送多条服务消息的代码实现方式探讨
相关文章

 发表评论

暂时没有评论,来抢沙发吧~