微信小程序通过wx:for做多级树形菜单

首先了解我做的树形是怎样的：(如图所示)

ok,百度一下:微信小程序如何做树形菜单，其中有一个是这样的：大佬的例子
但他这个是vue的，稍微改一下就差不多了，现在了解一下wx:for的语法(暂时没找到官方的，找到再更新)。
代码(只显示2级树形菜单，思路见后面)：
wxml(样式直接写了)

<view bindtap="clickTone" style="width: 37vw;height:10vh;display:flex;justify-content: space-between;border-radius: 0.5vw;margin-top: 0.8vw;">
            <view style="display: flex;flex-direction: row;align-items: center;">
              <image src="../../src/static/timbreselect.png" mode="widthFix" style="width: 2vw;margin-left: 1.5vw;"></image>
              <text style="mar