本篇學(xué)習(xí)經(jīng)驗(yàn)講解如何使用ivx的if判斷組件和for循環(huán)組件來(lái)創(chuàng)建一個(gè)折疊菜單欄。 展示折疊菜單效果 首先，我們需要展示折疊菜單所需的效果。從圖中可以看出，側(cè)邊欄有父菜單，父菜單下有子菜單。有子菜

本篇學(xué)習(xí)經(jīng)驗(yàn)講解如何使用ivx的if判斷組件和for循環(huán)組件來(lái)創(chuàng)建一個(gè)折疊菜單欄。

展示折疊菜單效果

首先，我們需要展示折疊菜單所需的效果。從圖中可以看出，側(cè)邊欄有父菜單，父菜單下有子菜單。有子菜單的選項(xiàng)右邊會(huì)有箭頭，子菜單展開(kāi)/未展開(kāi)時(shí)，箭頭方向不同。點(diǎn)擊菜單選項(xiàng)后，內(nèi)容區(qū)域會(huì)顯示對(duì)應(yīng)內(nèi)容。折疊面板可以用于多級(jí)菜單欄，它初始只會(huì)顯示第一層菜單選項(xiàng)，可以通過(guò)點(diǎn)擊展開(kāi)或收起更深層的菜單選項(xiàng)。

創(chuàng)建側(cè)邊欄和內(nèi)容區(qū)

首先，我們要?jiǎng)?chuàng)建好側(cè)邊欄和內(nèi)容區(qū)。

使用循環(huán)和條件判斷組件創(chuàng)建折疊菜單欄

在Demo中，這個(gè)折疊菜單欄一共有3級(jí)。每一級(jí)的基礎(chǔ)欄都是相同的，而基礎(chǔ)欄就是每一級(jí)的一個(gè)選項(xiàng)模板。我們將這個(gè)模板與循環(huán)中的數(shù)據(jù)進(jìn)行綁定，以幫助用戶選擇所需的菜單。

基礎(chǔ)欄中的箭頭狀態(tài)也綁定了一些信息，比如當(dāng)前欄沒(méi)有子菜單時(shí)，箭頭不會(huì)顯示。有子菜單時(shí)，子菜單是否展開(kāi)，箭頭的方向也不同。這些需要用到if判斷組件來(lái)判斷。每一級(jí)選項(xiàng)視為父選項(xiàng)，下一級(jí)基礎(chǔ)欄是父選項(xiàng)的子菜單。例如，在下圖中，“購(gòu)物中心”，“我的訂單”，“全部訂單”都是基礎(chǔ)欄?！百?gòu)物中心”是“我的訂單”的父選項(xiàng)，“我的訂單”是“全部訂單”的父選項(xiàng)。因此，如果要添加子菜單，就需要在每一級(jí)循環(huán)下再添加一級(jí)循環(huán)。

綁定數(shù)據(jù)與子數(shù)據(jù)

給第一級(jí)循環(huán)綁定數(shù)據(jù)時(shí)，直接綁定全部數(shù)據(jù)，因?yàn)槿繑?shù)據(jù)都要注入到菜單欄中。而后面的循環(huán)只需綁定當(dāng)前數(shù)據(jù)的子數(shù)據(jù)即可。

處理展開(kāi)狀態(tài)和子菜單判斷

菜單欄是否為展開(kāi)狀態(tài)需要一個(gè)變量來(lái)綁定，最適合使用布爾變量。因此，我們添加一個(gè)布爾變量來(lái)判斷該欄子菜單是否展開(kāi)。同時(shí)，判斷當(dāng)前菜單欄是否有子菜單需要用到if判斷組件。我們通過(guò)布爾變量的值來(lái)判斷是否展開(kāi)子菜單，將子菜單是否可見(jiàn)的if判斷組件與添加的布爾變量綁定。

通過(guò)當(dāng)前數(shù)據(jù)的值的長(zhǎng)度是否為0，我們可以判斷是否有子項(xiàng)。因此，將是否有子項(xiàng)的if判斷組件與當(dāng)前循環(huán)的值的長(zhǎng)度是否為0綁定。

創(chuàng)建多級(jí)循環(huán)

由于子菜單也可能有其子菜單，所以創(chuàng)建原理和父菜單相同，只是當(dāng)前循環(huán)數(shù)據(jù)不同。在Demo中一共有3級(jí)，所以我們創(chuàng)建了3級(jí)循環(huán)。

添加點(diǎn)擊事件

最后，給每級(jí)循環(huán)中的菜單欄添加點(diǎn)擊事件，從而實(shí)現(xiàn)每次點(diǎn)擊改變子菜單是否可見(jiàn)的效果。通過(guò)改變布爾變量的值，與是否展開(kāi)子菜單綁定，就能實(shí)現(xiàn)展開(kāi)或收起的效果。