微信小程序自定義日歷組件及flex布局最后一行對(duì)齊問(wèn)題分析

發(fā)表時(shí)間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：76

在編寫(xiě)過(guò)程中，因?yàn)榇蠹叶贾溃諝v組件是有固定行數(shù)和每一行的固定列數(shù)的（即使當(dāng)前方塊內(nèi)沒(méi)有值），所以結(jié)合小程序“數(shù)據(jù)優(yōu)先”的特點(diǎn)，最合適的布局方式一定是flex了！

說(shuō)一下大致思路（布局上），筆者將整個(gè)組件分為兩部分：分別是

頭部的當(dāng)前日期（年月）顯示，以及左右兩側(cè)的切換按鈕
當(dāng)前切換月份的日期顯示

頭部的布局自不多說(shuō)：一個(gè) display:flex; 加上 align-items:center; 居中簡(jiǎn)直完美。底部的日期顯示我是采用的“將整體分為六行，每一行七列”的布局方式 —— 因?yàn)橐粋€(gè)月最多31天，每一周最多7天，6X7=42，行數(shù)六行足夠使用。（而且現(xiàn)在基本上日歷都是6行7列的）

這樣的話(huà)我就給每一行設(shè)置相同的class，讓其再用flex規(guī)范子元素（子組件）：

<view class="calendar_panel calendar_panel_two">
    <view class="calendar_box">
     <view class="weekday_label">日</view>
     <view class="weekday_label">一</view>
     <view class="weekday_label">二</view>
     <view class="weekday_label">三</view>
     <view class="weekday_label">四</view>
     <view class="weekday_label">五</view>
     <view class="weekday_label">六</view>
    </view>
    <view class="calendar_box" wx:for="{{dateList}}" wx:for-item="week" style="{{index==0?'justify-content:flex-end':''}}">
       <view class="weekday_label {{(item.value=http://www.wxapp-union.com/=selectedDate)?'active_date':''}} {{(item.value=http://www.wxapp-union.com/=now_selectedDate)?'active_dates':''}}" wx:for="{{week}}">
        <view class="" bindtap="selectDate" data-date="{{item}}">
         {{item.date}}
        </view>
       </view>
    </view>
</view>

（代碼中倒數(shù)第七、八行的判斷是檢驗(yàn)是否是當(dāng)前日期（now_selectedDate）或選中日期（selectedDate），為其加特殊效果，對(duì)布局不造成影響）

.calendar_panel{
    width: 100%;
    height: calc(100% - 56rpx);
}
.calendar_panel_two{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.calendar_box{
    width: 100%;
    background: #fff;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    height: calc(100% / 6);
    align-items: center;
}
.weekday_label{
    font-size: 27rpx;
    padding: 12rpx 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.weekday_label>view{
    box-sizing: border-box;
    padding: 20%;
}
.select_icon{
    width: 30rpx;
    height: 30rpx;
}
.active_date{
    background: rgba(0,0,0,.12);
    color: rgba(0,0,0,.6);
    overflow: hidden;
    position: relative;
}
.active_dates{
    background: rgba(0,0,0,.1);
    color: rgba(0,0,0,.5);
    position: relative;
}
.active_dates::before{
    content: "今天";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: blue;
    font-size: 20rpx;
}

布局方完成，我滿(mǎn)心歡喜的按下ctrl+s，發(fā)現(xiàn)：

可以看到：控制每一行的類(lèi)是 “calendar_box”，那么毫無(wú)疑問(wèn)，導(dǎo)致出現(xiàn)如圖原因肯定是此類(lèi)中有這樣一行代碼：

justify-content: space-around;

果不其然！

在本項(xiàng)目中，我的解決方法很簡(jiǎn)單：將這一行代碼去掉，那么由此導(dǎo)致的寬高問(wèn)題怎么解決？這個(gè)問(wèn)題，css給出了解決方案—— calc() ！我將“每一行”的高度設(shè)為外部view的1/6： height:calc(100% / 6) ，每一行中列的寬度設(shè)為整行寬度的1/7： width:calc(100% / 7) 根據(jù)CSS文檔流的特點(diǎn)，這些元素就會(huì)一個(gè)接一個(gè)的排列，賊好看的那種~（去這里）

★

有了calc等css3函數(shù)的“加盟”，可以預(yù)見(jiàn)這種純‘原生’的解決方式將會(huì)越來(lái)越多的被使用到各種場(chǎng)景。

剛才說(shuō)了，這個(gè)案例中的行列數(shù)是固定的 —— 這并不少見(jiàn)！那么，除了本文提出的解決方法，還能怎么做？

動(dòng)態(tài)改變最后一個(gè)元素的寬度

我們都知道，flex布局中還有一個(gè)比較著名的概念就是 flex: 1; （ flex: auto; ）了，他能動(dòng)態(tài)“填滿(mǎn)”剩余空間，那么我們?cè)僮釉赝?jí)位置再加一個(gè)元素，對(duì)他設(shè)置 最小寬度 為子元素相同寬度，并且margin和子元素一致：

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <i class="lists"></i>
</div>

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width:100px;
    height:100px;
    background-color: skyblue;
    margin: 10px;
}
i.lists{
   min-width:100px;
   margin: 10px;
}

這個(gè)方法和下一個(gè)問(wèn)題的第一種方法類(lèi)似，但要簡(jiǎn)單很多！

根據(jù)個(gè)數(shù)最后一個(gè)元素動(dòng)態(tài)margin

簡(jiǎn)單來(lái)說(shuō)就是：?jiǎn)为?dú)設(shè)置最后一行的最后一個(gè)元素，控制其margin-right 由于每一列的數(shù)目都是固定的，因此，我們可以計(jì)算出不同個(gè)數(shù)列表應(yīng)當(dāng)多大的margin值才能保證完全左對(duì)齊。例如，假設(shè)每行4個(gè)元素，結(jié)果最后一行只有3個(gè)元素，則最后一個(gè)元素的margin-right大小是“列表寬度+間隙大小”的話(huà)，那最后3個(gè)元素也是可以完美左對(duì)齊的。然后，借助樹(shù)結(jié)構(gòu)偽類(lèi)數(shù)量匹配技術(shù)，我們可以知道最后一行有幾個(gè)元素。例如：

.list:last-child:nth-child(4n - 1)說(shuō)明最后一行，要么3個(gè)元素，要么7個(gè)元素……
.list:last-child:nth-child(4n - 2)說(shuō)明最后一行，要么2個(gè)元素，要么6個(gè)元素……

.container {
    display: flex;
    /* 兩端對(duì)齊 */
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* 如果最后一行是3個(gè)元素 */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2個(gè)元素 */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

那么，如果每一行的列數(shù)是不固定的呢？

這個(gè)問(wèn)題的解法有很多種，其中筆者最“推崇”的是——用空白元素占位！使用足夠的空白標(biāo)簽進(jìn)行填充占位：具體的占位數(shù)量是由最多列數(shù)的個(gè)數(shù)決定的，例如這個(gè)布局最多7列，那我們可以使用7個(gè)空白標(biāo)簽進(jìn)行填充占位，最多10列，那我們需要使用10個(gè)空白標(biāo)簽。

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <i></i><i></i><i></i><i></i><i></i>
</div>

這種方法的缺點(diǎn)（同時(shí)也是優(yōu)點(diǎn)）就是：占位的 <i> 元素寬度和margin設(shè)置必須和列表父元素一樣即可！

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-right: -10px;
}
.container .list {
    width: 100px; 
    height:100px;
    background-color: skyblue;
    margin: 15px 10px 0 0;
}
/* 和列表一樣的寬度和margin值 */
.container > i {
    width: 100px;
    margin-right: 10px;
}

這里要左對(duì)齊，則設(shè)置i的margin-right；同樣的如果右對(duì)齊，則需設(shè)置margin-left。

還有一種目前被很多人接受的方法就是曾經(jīng)風(fēng)靡的 grid布局 —— 它有天然的單側(cè)對(duì)其和方塊間隙，對(duì)熟悉grid的人來(lái)說(shuō)，本文這個(gè)問(wèn)題幾乎不會(huì)出現(xiàn)：

/** html代碼 */
<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>

/** CSS代碼 */
.container {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 10px;
}
.list {
    width: 100px; 
    height:100px;
    background-color: skyblue;
    margin-top: 5px;
}

最后再介紹一下這個(gè)組件：它在調(diào)用時(shí)接收兩個(gè)參數(shù)——他們是兩個(gè)event函數(shù)，你需要監(jiān)聽(tīng)他們，你可以得到：剛顯示組件時(shí)的當(dāng)前日期/星期幾和你點(diǎn)擊選中日期時(shí)選中的年月日和星期幾