在開發(fā)這個小彈窗時，想到了用WeUI中的的半屏彈窗，不想重復造輪子。但還是遇到不少小問題。
1、底部有一大段的空白。這個地方按照WeUI的設(shè)計，應該是要放操作按鈕的。但是我們沒有，所以就留下來一大段的空白?？梢允褂靡韵路椒?/p>
外部樣式類取名為weui-half-screen-dialog
.weui-half-screen-dialog {
? margin-bottom: -100rpx? !important;
}????
或者
.weui-half-screen-dialog .weui-half-screen-dialog__ft{
? display: none !important;
}
2、右上角有個關(guān)閉按鈕，但是發(fā)現(xiàn)點擊時無反應。
仔細查看下，發(fā)現(xiàn)這里面有個更多按鈕，雖然看不到，但卻是是影響到了關(guān)閉按鈕的點擊。雖然文檔沒有相關(guān)屬性或方法來隱藏那個按鈕，但可以通過外部樣式類，然后找到這個更多按鈕的class.然后進行樣式設(shè)置。
.weui-half-screen-dialog .weui-half-screen-dialog__hd__side{
? display: none !important;
}
3、自定義組件中使用half-screen-dialog無法使用外部樣式類。
為了將上述的彈窗更方便的調(diào)用，封裝了組件。但是發(fā)現(xiàn)一個問題，外部樣式類在組件中是無法正常使用的。?
也就是說在組件的wxss中無法正常使用.weui-half-screen-dialog 這個外部樣式類，然后看層級結(jié)構(gòu)直接使用.weui-show? .weui-hale-screen-dialog來設(shè)置樣式 也是無效的，因為這些樣式是在#shadow-root中，雖然了解的不深，但應該也是類似于虛擬節(jié)點，無法直接修改他的樣式。
無奈只能在Page.wxss中使用.weui-hale-screen-dialog進行樣式的修改。但是這個已經(jīng)違背了組件的意義，組件就是為了復用，或者拆分代碼。如果還需要調(diào)用方在wxss中寫上這么個設(shè)置樣式的代碼，很不好。
最后發(fā)現(xiàn)雖然無法直接使用 #shadow-root中的class進行樣式的設(shè)置。但是我可以給?half-screen-dialog 加上一個class。 然后通過class 進行枚舉里面的view. 以此來實現(xiàn)對響應的view的樣式進行設(shè)置。
比方說要實現(xiàn)以下效果：隱藏頭部(weui-half-screen-dialog__hd) 跟 底部(weui-half-screen-dialog__ft)的內(nèi)容。
設(shè)置class為dialog.顯示隱藏里面所有的子view，然后顯示第二個子view，因為?weui-half-screen-dialog__bd剛好就在第二個位置。
因為css這種枚舉的方法，會將里面所有的子view都隱藏，所以單單只顯示weui-half-screen-dialog__bd還不夠，還需要將weui-half-screen-dialog__bd中的子view都顯示出來。 也不知道這么寫是不是最好的方法，翻了下css選擇器文檔只看中了方法。
當然上面的效果，還需要加上一些代碼，比如設(shè)置陰影、外邊距、圓角。 注意設(shè)置了margin,在隱藏的時候需要還原下。不然隱藏時底部還會顯示出一點點彈窗。
其實做到這里發(fā)現(xiàn)使用half-screen-dialog 已經(jīng)有點繞彎子了，還不如直接使用view 來進行寫。自己加陰影層，加動畫。但是有以下原因讓我放棄了使用view?
1、使用view，需要在外部對這個組件設(shè)置一些樣式，比如display:fixed,距離底部的高度。如果使用上面的方法的話，就不需要了。?
2、這么糾結(jié)于使用half-screen-dialog 歸根到底還是一種執(zhí)念，花了好幾個小時，把這個玩熟了，就放棄有點不爽。最關(guān)鍵的是這個玩熟以后能解決之前封裝的picker組件問題。
封裝hf-picker選擇器。因為自帶的picker在iOS 、安卓上顯示的樣式不一致，產(chǎn)品測試提出個能不能樣式弄成一致。想系統(tǒng)提供了picker-view這個，應該是沒問題的。?
自己對這個組件的要求就是：無縫銜接，引入組件后，直接將 pciker 標簽名替換為 hf-picker就行，其他的屬性、事件都保持一致。
一番操作以后，發(fā)現(xiàn)在層級不復雜的頁面效果很不錯，但是在一些view嵌套view嵌套的很深，比如里面已經(jīng)有非statics的父view時，那么這個選擇器的彈窗顯示的位置就不對了。同事說這個通過view肯定是實現(xiàn)不了，畢竟父view范圍就那么大，除非把選擇器view放到page里面去 。這個方案是可以實現(xiàn)，但是違背了封裝的原則。同事說試試half-screen-dialog，發(fā)現(xiàn)提供的Slot效果達不到UI要求.
如今有方法對half-screen-dialog的內(nèi)部元素樣式進行設(shè)置了，趕緊搞起。 最終結(jié)果還是挺好的。?
