微信小程序 数据 二级，多级列表展示效果实现

前端代码

< block wx:for= "{{workdict}}" wx:for-item= "workitem" class= "{{workitem.cs}}" > <!--第一级数据-->

< view class= "flex-wrp workitemlist">

< view class= "flex-item">

< text class= 'content'>{{workitem.name}} </ text >

< view class= "flex-item">

< block wx:for= "{{workitem.imgs}}" wx:for-item= "subitems"><!--第二级数据-->

< image lazy-load= "true" class= 'follow-image' mode= "aspectFit" src= "{{subitems.url}}"></ image >

</ block >

< view class= "right addimg" bindtap= 'upfile' data-ordercode= "{{order}}" data-workid= "{{workitem.workid}}" >

+添加

</ view >

</ view >

</ view >

</ view >

</ block >

js 数据源

workdict:

[{ name: "AAA", workid: 1010, has: 1, cs: "", imgs: [{ id: "3cff618d-edd6-4d81-bb52-5a40f25039c5", url: "https://123.com/upload/BCW180120103754395629/1010_0_148613.png" }] },

{ name: "BBB", workid: 1020, has: 1, cs: "", imgs: [] },

{ name: "CCC", workid: 101, has: 0, cs: "hidden", imgs: [] },

{ name: "DDD", workid: 110, has: 1, cs: "", imgs: [] },

{ name: "EEE", workid: 120, has: 1, cs: "", imgs: [{ id: "3cff618d-edd6-4d81-bb52-5a40e23039c5", url: "https://123.com/upload/BCW180120103754395629/1010_0_148613.png" },

{ id: "3cff618d-edd6-4d81-bb52-5a40e25039c5", url: "https://123.com/upload/BCW180120103754395629/1010_0_148613.png" }] }]