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

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

展示折疊菜單效果

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

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

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

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

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

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

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

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

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

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

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

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

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

添加點(diǎn)擊事件

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