對(duì)于部分產(chǎn)品結(jié)構(gòu)非常復(fù)雜的客戶來說，無限級(jí)伸縮可折疊菜單顯得非常實(shí)用。百度智能小程序要實(shí)現(xiàn)理論上的無限級(jí)伸縮折疊菜單，除了小程序開發(fā)自定義遞歸組件外，還需要數(shù)據(jù)源本身支持或根據(jù)遞歸思路開發(fā)并轉(zhuǎn)化為JSON，還需要通過樣式表進(jìn)行控制，最后根據(jù)用戶的操作習(xí)慣，定制對(duì)應(yīng)的展開和折疊JS特效。

我們?cè)诰W(wǎng)上查了很多資料，可能有這方面的需求的客戶很少，所以暫時(shí)沒有找到更好的實(shí)現(xiàn)方案。于是創(chuàng)絡(luò)通過前后端同事配合，開發(fā)完成了這個(gè)功能。接下來我們將實(shí)現(xiàn)思路分享給大家，希望對(duì)你有所幫助。

一、構(gòu)造遞歸JSON數(shù)據(jù)源，以PHP為例，需要在數(shù)據(jù)庫(kù)開發(fā)解決就要考慮無限級(jí)需求，即采用遞歸思想設(shè)計(jì)MySQL數(shù)據(jù)庫(kù)。然后同樣的，通過PHP遞歸讀取數(shù)據(jù)并存進(jìn)多維數(shù)組。如果后期需要精細(xì)化控制不同級(jí)別的樣式，則可以通過自定義函數(shù)為每一個(gè)元素標(biāo)注默認(rèn)展開或折疊標(biāo)記、層級(jí)深度標(biāo)記、是否有下級(jí)元素、直接下級(jí)元素?cái)?shù)量標(biāo)記等，最終可以參考以下結(jié)構(gòu)構(gòu)造函數(shù)，但只是僅供參考，具體請(qǐng)根據(jù)您自己的需求構(gòu)造JSON數(shù)據(jù)源。

二、使用Component構(gòu)造小程序遞歸組件。構(gòu)造的方法不同的小程序品牌可能略微有一點(diǎn)差別，但是基本上都是一樣的，具體使用方法可以參考文檔自行構(gòu)造，基本上都是在Component中使用servant來實(shí)現(xiàn)遞歸，此處不再贅述。

三、前端控制樣式，樣式控制代碼和做網(wǎng)站的CSS幾乎一致，唯一需要考慮的是雖然理論上是無限級(jí)，但是界面上幾乎不可能，因此，建議默認(rèn)控制最小級(jí)別的顯示效果，然后再單獨(dú)針對(duì)需要特別顯示的級(jí)別進(jìn)行樣式控制。

四、JS控制展開或折疊，這里推薦搭配使用scroll-view組件來實(shí)現(xiàn)，具體請(qǐng)參考官方文檔。

最后我們來看一下實(shí)現(xiàn)的動(dòng)態(tài)效果，由于GIF圖片略大，且部分小程序終端目前可能會(huì)不支持GIF圖片，因此建議在電腦端查看動(dòng)態(tài)效果。也可以手機(jī)百度APP里面搜索“創(chuàng)絡(luò)科技網(wǎng)站建設(shè)”，打開小程序真實(shí)體驗(yàn)。這個(gè)小程序是標(biāo)準(zhǔn)版網(wǎng)站的原生開發(fā)的，里面的數(shù)據(jù)均為演示，展示效果為主。