How does the front end implement the file folder system through interface data?

json
{
code:200,
list:[
  {
     type:1,
     path:"www.file.xxxxx",
     name:"xx",
     suffix: ,
     parentid:123
     ...
  },
 {
     type:2,
     path:"www.file.xxxxx",
     name:"zzz",
     suffix: ".xlsx",
     parentid: null
     ...
  }
  ...
]
}
type 1 2pdfpng,wrod
<scroll-view class="fmm-contont" scroll-y="true">
       <block wx:for="{{files}}" wx:for-item="file" wx:key="*this" >
            <view class="file-item" data-id="{{file.id}}" catchtap="onFileTap" wx:if="{{file.type != 1}}">
              <text>{{file.fileName}}</text>
            </view>
            <view wx:else>
            <view class="floder-item" data-id="{{file.parentid}}" catchtap="onFloderTap">
              <text>{{file.fileName}}</text>
            </view>
            ...
            </view>
       </block>
    </scroll-view>

this API returns the files and folders at the first level and can be traversed. Click on the folder to pass a parentid to this interface to get the data at the second level, but how can I traverse the wxml? Write another wx:for= "{{childfiles}}" under .floder-item? What if there are three or four levels down there? There is no train of thought


Recursive traversal to get

Menu