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;
}
|
是不是很简单就实现了呢?