一、需求
- 显示当前月份的日期
- 日期与星期对应
二、实现
1、布局结构
2、布局实现
- container:用固定的宽高,宽度可以占满整个屏幕(100vw)
- header:高度固定,宽度继承,布局使用flex,字体居中,行高=高度;适当修饰:字体size,padding…
- left:布局flex=0.5
- right:布局flex=0.5
- middle:布局flex=2
- panel:高度固定,宽度继承,布局使用flex,字体居中,行高=高度;适当修饰:字体size,padding…
- day_item:布局flex=1
- 此处用wx:for来遍历一个数组:day: [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’],
- cal_body:宽度高度可以不设置,让内容将<view>撑开,布局:flex,拆行:flex-wrap:wrap; 字体居中, 适当修饰:字体size,padding…
- date_item:
- 此处用wx:for来遍历一个日期数组来实现,有多少天就有多少个date_item
- 固定宽高:
- 具体宽度计算:宽 = (cal_body.width - 左右padding - 左右margin)/ 7
- 具体高度计算:高 = 自己定,瞎几把调就好了,我定了50rpx
- date_item:
3、逻辑
-
3.1、通过布局结构图可以知道:
- 正常情况:
- 天数=30天,占了:5行,30个date_item,一个元素个数=30的数组
- 第一种极端情况:
- 月份天数最多31天,该月1日是星期六,占了:6行,37个date_item,一个元素个数=37的数组
- 第二种极端情况:
- 二月份28天,且 2月1日是星期日,占了:4行,28个date_item,一个元素个数=28的数组
- 之所以不计算月份末尾的【空】date_item的数量,是因为不影响渲染。
- 以上的信息仅供参考
- 正常情况:
-
3.2、存储日期的数组的形成
- 首先,该数组一定包含当前月份的所有天数
- 其次,该月的1号要与正确的星期几对应
-
3.3、拆分数组的想法
- 假设当前月份的1号是星期六,对应我的布局结构图,1号前面还有6个空位(日、一、二…)需要补足
- 那么就需要一个补足部分
- 由于月份天数从1开始,那么补足部分就用 0 来填充
- 假设当前月份的1号是星期日,对应我的布局结构图,1号前面不需要补足,那么此时需要进行判断
- 假设当前月份的1号是星期六,对应我的布局结构图,1号前面还有6个空位(日、一、二…)需要补足
4、逻辑的实现
-
获取当前年、月:
let year = new Date().getFullYear(); // 2021 let month = new Date().getMonth(); // 4,这里是五月
-
获取当前月天数:
let monthDay = new Date(year, month+1, 0).getDate(); // 注意这里用的是月份+1,也就是对应现实的月份数
-
获取当前月的1号是星期几:
let firstDay = new Date(year, month, 1).getDay(); // 扩展一下,获取当前月最后一天是星期几 let lastDay = new Date(year, month, monthDay).getDay();
-
数组的前补足部分:
// 定义一个空的前补足数组 let fillDate = []; // 判断当前月份是否需要补足,(即:判断 当前月1号 = 星期日?) if(firstDay){ for(let i = 0; i < firstDay; i++){ // 往补足数组中填充 0 fillDate.push(0); } }
-
数组的月份正常日期部分:
// 正常日期填充 let normalDate = []; for (let j = 1; j <= monthDay; j++) { normalDate.push(j); }
-
扩展一下:如果想要月份后面的空间也用date_item补足,可以做数组的第三部分-后补足部分:
// 定义一个空的后补足数组 let backDate = []; if (lastDay != 6) { for (let k = lastDay; k < 6; k++){ backDate.push(0); } }
-
好了,现在:前补足数组,中间正常日期数组,后补足数组都准备好了。接下来就是拼接数组:
- 注意:这里我是将后面的数组拼接到前补足数组后面
// 后补足数组,按需进行concat() fillDate = fillDate.concat(normalDate) //.concat(backDate); // 此时我们就得到了一个符合我们布局排列的数组fillDate // 我们再对fillDate进行遍历,就可以了
5、渲染
-
数据渲染到页面上:两个红框,就是前补足和后补足