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

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

展示折疊菜單效果

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

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

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

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

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

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

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

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

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

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

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

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

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

添加點擊事件

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