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


前端代码
< 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" }] }]

智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告