最近在學(xué)習(xí)ivx的過程中，發(fā)現(xiàn)在拓展組件中有一個可滑動容器組件。在制作一些案例的消息列表時，是經(jīng)常需要使用這種展示效果的，例如消息列表左滑即可選擇刪除或者置頂?shù)冉?jīng)常使用的功能，而平常按鈕又是隱藏起來的，不會擠占UI的展示區(qū)域非常便捷。ivx中將這個功能單獨(dú)封裝成一個功能組件，這里為ivx模塊細(xì)分工作點(diǎn)個贊！
1.添加可滑動容器
在下圖位置中可以找到可滑動容器，添加之后可以先看一下可滑動容器的結(jié)構(gòu)，對象樹中除了會出現(xiàn)一個可滑動容器，它的下面還會出現(xiàn)一個可滑動按鈕組和一個可滑動行。此時選中可滑動容器再去點(diǎn)擊拓展組件，只能添加可滑動按鈕組，而且鼠標(biāo)右鍵可滑動按鈕組和可滑動行你會發(fā)現(xiàn)，可滑動按鈕組是可以刪除的，而可滑動行是不行的，畢竟它是整個可滑動容器的主要展示部分。
2.展示部分的主體-可滑動行
在ivx這個demo里面，是選中可滑動行添加了一個行容器，行容器中又添加三個列容器，分別展示頭像，昵稱消息內(nèi)容和消息日期?？苫瑒有忻种惺菐е械?，而且也確實(shí)可以把它當(dāng)成一個行組件看待。在內(nèi)部添加組件是橫向排列的，不過并不能像行組件一樣設(shè)置換行以及剪切，而且他的寬高也是由父容器可滑動容器的寬高決定的。
3.滑動后展示的區(qū)域-可滑動按鈕組
可滑動按鈕組也是采用行排列，我們在編輯器里將可滑動行滑走就可以設(shè)置它里面的展示效果了，demo中是添加了三個按鈕組件，寬度不等，高度都是100%填滿可滑動按鈕組。所以可滑動按鈕組的寬度是由它里面的組件的總寬度決定的，而它的的高度自然是由可滑動容器這個父容器決定了。
另外，選中它可以看到組件欄中很多組件都是可以添加的，不過常用的應(yīng)該還是按鈕，文字，圖片和圖標(biāo)這些。至于可滑動按鈕組的屬性欄，則很簡單只有一條容器中的位置。嗯，選左還是選右呢？Demo中是位于右側(cè)，改成左側(cè)當(dāng)然就變成向右滑了嘛。不滿足于此，我嘗試添加兩個按鈕組一個在左一個在右，然后我的可滑動容器就成功解鎖左搖右晃。不過在左右任意滑之后我又將兩個可滑動按鈕組都放在了一側(cè)，兩個按鈕組下的組件這回是重疊在了一起。好像有點(diǎn)皮，本來都在一側(cè)放在一個按鈕組里面不就好了嘛。不過再品品，細(xì)品，那我也可以做兩套滑動按鈕組，然后在不同的場景下只顯示其中一個讓另一個隱藏起來嘛，那效果不是更精致了。還有，這個屬性是可以數(shù)據(jù)綁定的，而且只有左側(cè)右側(cè)兩個選項？不出所料，他的數(shù)據(jù)綁定是一個布爾值變量true or false。經(jīng)過驗(yàn)證，true is left ，false is right。
4.配合for容器循環(huán)創(chuàng)建完成消息列表
最后demo中的消息列表還配合了for容器的循環(huán)創(chuàng)建功能，畢竟一個消息列表會有很多消息，每一條都要對應(yīng)一個可滑動容器，使用循環(huán)多創(chuàng)建幾個出來，一個消息列表的效果就算完成了。
5.總結(jié)
總結(jié)一下呢，可滑動容器算是比較容易掌握的一個小組件，而且ivx中還有許多其他常用功能的拓展組件，以后的學(xué)習(xí)中要去多發(fā)現(xiàn)多嘗試。不能只想著最基本的方式方法，不然用基礎(chǔ)的行列按鈕要實(shí)現(xiàn)類似的效果雖然也能做出來，但是無疑是會更復(fù)雜耗時的。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
