irpas技术客

在小程序当中渲染树_李自提

大大的周 7360

Python微信订餐小程序课程视频

https://blog.csdn.net/m0_56069948/article/details/122285951

Python实战量化交易理财系统

https://blog.csdn.net/m0_56069948/article/details/122285941 我们可以很轻松的去遍历一棵树,无论是广度优先遍历还是深度优先遍历,那么怎么在小程序当中渲染一棵树呢?

先看一下我们深度优先遍历的代码

?

| 123456789 | function dfs(tree) {``if``(!tree) return``console.log(tree.value)``if (tree.children) {``for``(``let i = 0; i < tree.children.length; i++) {``dfs(tree.children[i])``}``}``} |

可以看出,深度优先遍历的算法是利用递归,判断是否此节点有children属性,如果有就再次递归。

那么,我们小程序是不是可以定义一个组件,然后,这个组件接收一个object,然后在此组件内,判断object是否有children,如果有,就循环调用此组件,是不是就可以了呢?

下面我们来试一试。首先,我们来写一个组件,名字叫做 TreeNode,会接收一个参数 treeVal

?

| 12345678 | <``view``>``{{treeVal.value}}``<``view wx:if="treeVal.children" class="children_con">``<``block wx:for="{{treeVal.children}}">``<``TreeNode treeVal="{{item}}">TreeNode>````block>````view> view>`` |

JS部分

?

| 12345 | Component({``properties: {``treeVal: Object``}``}) |

CSS部分

?

| 123 | .children_con {``padding-left``: 50``rpx;``} |

是不是很简单就实现了呢?


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #在小程序当中渲染树 #123456789 #function #dfstree