微(wēi)信小(xiǎo)程序自(zì)定義日(rì)曆組件(∏∑jiàn)及flex布局最後一(yī)行(xíng)對( ≠duì)齊問(wèn)題分(fēn)析

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

發布人(rén)：葵宇科(kē)技(jì)

浏覽次數(shù)：85

在編寫過程中，因為(wèi)大(dà)家(jiā)都(dōγγ↑∞u)知(zhī)道(dào)，日(rì)曆組件(jiàn₹§λ¥)是(shì)有(yǒu)固定行(xíng)數(shù)和(hé) ≈每一(yī)行(xíng)的(de)固定列數(shù)的(de)（即使當前方塊內(nèi)沒有(y£∏↓£ǒu)值），所以結合小(xiǎo)程序“數(shù)據優先”的(de)特點，最合适的(deΩ•±)布局方式一(yī)定是(shì)flex了(le)！

說(shuō)一(yī)下(xià)大(dà)緻思路(lù)（布₹φ>ε局上(shàng)），筆(bǐ)者将整個(gè)組件(jià✘£$n)分(fēn)為(wèi)兩部分(fēn)：分(fēn)别是(shì®≤)

頭部的(de)當前日(rì)期（年(nián)月(yuè)）顯示 ♠，以及左右兩側的(de)切換按鈕
當前切換月(yuè)份的(de)日(rì)期顯示

頭部的(de)布局自(zì)不(bù)多(duō)說(shuō)：一(yī‍€•)個(gè) display:flex; 加上(shàng) align-items:center; 居中簡直完美(měi)。底部的(de)日(rì)期顯示我是(shì)采用↓→(yòng)的(de)“将整體(tǐ)分(fēn)為(wèi)六行(xíng)，每一♠$∞♥(yī)行(xíng)七列”的(de)布局方式 —— 因為(wèi)一(yī)個(g→₽♣è)月(yuè)最多(duō)31天，每一(yī)周最多(duōΩα¶)7天，6X7=42，行(xíng)數(shù)六行(xíng)足夠使用(yòn≈±∞•g)。（而且現(xiàn)在基本上(shàng)日(rì)曆都(dōu)是(shì)6行α∏±(xíng)7列的(de)）

這(zhè)樣的(de)話(huà)我就(jiù)給每一(yī)行(xíng)設Ω‌↓置相(xiàng)同的(de)class，讓其再用(yòng)flex規範€¥☆α子(zǐ)元素（子(zǐ)組件(jiàn)）：

<view class="calendar_panel calendar_panel_tw↑★o">
    <view class="calendar_box">
     <view class="weekday_label">日(rì)</view>
     <view class="weekday_label">一(yī)</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/=no"€→∑w_selectedDate)?'active_dates':''}}" wx:for="{{week}}">
        <view class="" bindtap="selectDate" data-date="{{item}}">
         {{item.date}}
        </view>
       </view>
    </view>
</view>

（代碼中倒數(shù)第七、八行(xíng)的(de)判£®≥‌斷是(shì)檢驗是(shì)否是(shì)當前日(rì)期（no&₽βw_selectedDate）或選中日(rì)期（selectedDate），♦•為(wèi)其加特殊效果，對(duì)布局不(bù)造成影(φ®↕yǐng)響）

.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;
}

布局方完成，我滿心歡喜的(de)按下(xià)ctrπ$σl+s，發現(xiàn)：

可(kě)以看(kàn)到(dào)：控制(zhì)每一(yī₽♣&)行(xíng)的(de)類是(shì) “calendar_box”，那←φ✔(nà)麽毫無疑問(wèn)，導緻出現(xiàn)如(rú)圖原因肯定是(shì)此類中£★← 有(yǒu)這(zhè)樣一(yī)行(xíng)代碼：

justify-content: space-around;

果不(bù)其然！

在本項目中，我的(de)解決方法很(hěn)簡單：将這(zhè)一₽∞★±(yī)行(xíng)代碼去(qù)掉，那(nà)麽由此導緻α‌€的(de)寬高(gāo)問(wèn)題怎麽解決？這(zhè)個(gè)問(wèn)題，css"≥給出了(le)解決方案—— calc() ！我将“每一(yī)行(xíng)”的(de)高(gāo)度設為(wèi)外εδ(wài)部view的(de)1/6： height:calc(100% / 6) ，每一(yī)行(xíng)中列的(de)寬度設為(wèi)±♣₹整行(xíng)寬度的(de)1/7： width:calc(100% / 7) 根據CSS文(wén)檔流的(de)特點，這(zhè)些(xiē)元&素就(jiù)會(huì)一(yī)個(gè)接一(yī)個(gè)的(deΩ>∏‌)排列，賊好(hǎo)看(kàn)的(de)那(nà)種~（去(qù)這(zhè)裡(∑∏×σlǐ)）

★

有(yǒu)了(le)calc等css3函數(shù)€★ ε的(de)“加盟”，可(kě)以預見(jiàn)這(zhè)種純‘原生(shē↓₹₽ng)’的(de)解決方式将會(huì)越來(lái)越多(duō)的(de)被使用(yòng)到÷✘(dào)各種場(chǎng)景。

剛才說(shuō)了(le)，這(zhè)個(gè)案例中的(de ≥∞)行(xíng)列數(shù)是(shì)固定的(de) —— 這(zh♣ε>è)并不(bù)少(shǎo)見(jiàn)！那(nà)麽，除了(le)本文(wén)提出的•β↔(de)解決方法，還(hái)能(néng)怎麽做(zuò)？

動态改變最後一(yī)個(gè)元素的(de)寬度

我們都(dōu)知(zhī)道(dào)，flex布局中還(hái®±λ≠)有(yǒu)一(yī)個(gè)比較著名的(de)概念就(jiù)是(¥÷shì) flex: 1; （ flex: auto; ）了(le)，他(tā)能(néng)動态“填滿”剩→§ Ω餘空(kōng)間(jiān)，那(nà)麽我們再子(zǐ)元素同÷γ♣級位置再加一(yī)個(gè)元素，對(duì)他(tā)設置 最小(xiǎo)寬度 為(wèi)子(zǐ)元素相(xiàng)同寬度，并且margin和(hé)子(zǐ)÷↓γ↓元素一(yī)緻：

<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;
}

這(zhè)個(gè)方法和(hé)下(xià)一(yī)個(gè)問(wènφ$♣γ)題的(de)第一(yī)種方法類似，但(dàn)要(yào)簡單很(hěn)↕δ≠↔多(duō)！

根據個(gè)數(shù)最後一(yī)個(gè)元素動态margin♣∞♥€

簡單來(lái)說(shuō)就(jiù)是(shì)：單獨設置最後一(yī)行("$xíng)的(de)最後一(yī)個(gè)元素，控制(×©zhì)其margin-right 由于每一(yī€✘→β)列的(de)數(shù)目都(dōu)是(shì)固定的(≥♥₹de)，因此，我們可(kě)以計(jì)算(suàn)出不(bù)同個(↓<★gè)數(shù)列表應當多(duō)大(dà)的(de)marg₩←in值才能(néng)保證完全左對(duì)齊。例如(rú)，假設每行(±≈←xíng)4個(gè)元素，結果最後一(yī)行(xíng)隻有(yǒu)3個(gè)元素，則最後≠≠γ一(yī)個(gè)元素的(de)margin-right大(dà↑≤♥)小(xiǎo)是(shì)“列表寬度+間(jiān)隙大(dà)小✔♠✔α(xiǎo)”的(de)話(huà)，那(nà)最後3個(gè)∑←✘™元素也(yě)是(shì)可(kě)以完美(měi)左對(duì)齊的(de₩λ)。然後，借助樹(shù)結構僞類數(shù)量匹配技(jì)術(shù)，我們可(kě≈←)以知(zhī)道(dào)最後一(yī)行(xíng)有(yǒu₩&ε≥)幾個(gè)元素。例如(rú)：

.list:last-child:nth-child(↓✔π4n - 1)說(shuō)明(míng)最後一(y↔>±‍ī)行(xíng)，要(yào)麽3個(gè)元素，要(yào)麽7個(gè¶δΩ★)元素……
.list:last-child:nth-child(4n - 2)說(shuō)明(mín÷'g)最後一(yī)行(xíng)，要(yào)麽2個(gè)元素，要(yào)麽6個(gè)元素×™☆……

.container {
    display: flex;
    /* 兩端對(duì)齊 */
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* 如(rú)果最後一(yī)行(xíng)是(shì)3個(gè)♥∑™₽元素 */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* 如(rú)果最後一(yī)行(xíng)是(shì)2個(gè)元素 *¶→γ/
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

那(nà)麽，如(rú)果每一(yī)行(xíng)的(de)列數(shù)是☆π(shì)不(bù)固定的(de)呢(ne)？

這(zhè)個(gè)問(wèn)題的(de)解法有(yǒu)很(hěn)多(d$₽♦σuō)種，其中筆(bǐ)者最“推崇”的(de)是(shì)λ₩¥——用(yòng)空(kōng)白(bái)元素占位！使用(yòng)足夠'€的(de)空(kōng)白(bái)标簽進行(xíng)填充占位：具體(tǐ)的(d§→e)占位數(shù)量是(shì)由最多(duō)列數(shù)'≈•→的(de)個(gè)數(shù)決定的(de)，例如(rú)這(zhè)個(gè)布局最多(duō→♦φ )7列，那(nà)我們可(kě)以使用(yòng)7個(gè)空(kōng)白♣¶φ (bái)标簽進行(xíng)填充占位，最多(duō)10列，那(nà)我們需要(yà♣♠πo)使用(yòng)10個(gè)空(kōng)白(bái)标簽。

<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>

.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;
}
/* 和(hé)列表一(yī)樣的(de)寬度和(hé)margin值 */
.container > i {
    width: 100px;
    margin-right: 10px;
}

這(zhè)裡(lǐ)要(yào)左對(duì)齊，則設置i的(de)ma€←rgin-right；同樣的(de)如(rú)果右對(duì)齊，則需設置ma>÷α¥rgin-left。

還(hái)有(yǒu)一(yī)種目前被很(hěn)多(φ₩duō)人(rén)接受的(de)方法就(jiù)是(shì)曾經風(fēng)靡的(de) grid布局 —— 它有(yǒu)天然的(de)單側對(duì)其和(hé)方塊間(jiān)隙，對÷© ™(duì)熟悉grid的(de)人(rén)來(lái)說<• <(shuō)，本文(wén)這(zhè)個(gè)問(wèn)題幾乎不(bù)會©Ω(huì)出現(xiàn)：

/** html代碼 */
<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <di÷αv class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>

/** CSS代碼 */
.container {
    display: grid;
    jusφ₹‍tify-content: space-between;
    grid-temp₽∑late-columns: repeat(auto-fill, 100px);
    grid-gap: 10px;
}
.list {
    width: 100px; 
    height:100px;
    background-color: skyblu£γ×✘e;
    margin-top: 5px;
}

最後再介紹一(yī)下(xià)這(zhè)個(gè)組件(jiànφ♠)：它在調用(yòng)時(shí)接收兩個(gè)參數(shù)—βγε—他(tā)們是(shì)兩個(gè)event函數(shù)，你(nǐ)需要☆βα‌(yào)監聽(tīng)他(tā)們，你(nǐ)可(kě)以得&>(de)到(dào)：剛顯示組件(jiàn)時(shí)的(de)當前日(rì)期/♠'星期幾和(hé)你(nǐ)點擊選中日(rì)期時(shí)選÷$≥中的(de)年(nián)月(yuè)日(rì)和(hé)星‍$ 期幾