最近为我开源的小项目:微信小程序扩展自定义组件库(点击去GitHub) 增加了一个新组件 —— 日历组件。
效果演示:
在编写过程中,因为大家都知道,日历组件是有固定行数和每一行的固定列数的(即使当前方块内没有值),所以结合小程序“数据优先”的特点,最合适的布局方式一定是flex了!
先说一下大致思路(布局上),笔者将整个组件分为两部分:分别是
- 头部的当前日期(年月)显示,以及左右两侧的切换按钮
- 当前切换月份的日期显示
头部的布局自不多说:一个 display:flex;
加上 align-items:center;
居中简直完美。
底部的日期显示我是采用的“将整体分为六行,每一行七列”的布局方式 —— 因为一个月最多31天,每一周最多7天,6X7=42,行数六行足够使用。(而且现在基本上日历都是6行7列的)