利用Flex实现日历布局

利用Flex实现日历布局

周末尝试用Taro + Vue 重写一下之前的小程序，但是发现小程序里Vue框架下的Calendar组件适配起来都有点问题，尝试了下用Taro + Vue自己写了一个日历组件。主要将里面的Flex布局记录下来，方便后面使用。

1. 组件布局开发流程

先上效果图，

基本上实现了日期按照月份展示，切换月份等点击事件。其中主要工作量在日期排版的CSS布局。首先说下布局的思路：

2. 首行和末尾不足7个元素的用空元素补足

首先根据年份和月份获取的当月天数放在一个大的数组中，然后算出当月的1号是周几。假如是周日，则第一行的长度为7的数组需要补充6个空值；假如是周六，则需要补充5个空值...以此类推；

其次，中间可以凑满7个元素的日期，以每7个一组的形式存入一个二维数组中。

<view class="calendar-body-content-header">
    <view 
    class="calendar-body-content-header-item"
    v-for="(item,index) in calendarContentHeader"
    :key="index+'header'"
    >
    {{ item }} 
    </view>
</view>
<view 
class="calendar-body-content-body"
v-for="(calendarContentBodyItem,index) in calendarContentBody"
:key="index+'body'"
>
    <view 
    class="calendar-body-content-body-item"
    v-for="(item,index) in calendarContentBodyItem"
    :key="index+'body-line'"
    >
    {{ item }} 
    </view>
</view>
<view class="calendar-body-content-tail">
    <view 
    class="calendar-body-content-tail-item"
    v-for="(item,index) in calendarContentTail"
    :key="index+'tail'"
    :style="bgColor"
    >
    {{ item }} 
    </view>
</view>

3. 利用Flex实现日历形式对齐

关键点在于容器成员flex:1的设置，这样设置，容器内元素会等比放大缩小，且宽度不随width变化。

.calendar-body-content-body {
    display: flex;
    width: 100%;
    height: 10vh;
    justify-content: space-around;
    align-items: center;
    .calendar-body-content-body-item {
        font-size: 0.9rem;
        font-weight: bolder;
        color: #000;
        flex:1;
        text-align: center;
    }
}