我们可以很轻松的去遍历一棵树,无论是广度优先遍历还是深度优先遍历,那么怎么在小程序当中渲染一棵树呢?
先看一下我们深度优先遍历的代码
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
<view> {{treeVal.value}} <view wx:if="treeVal.children" class="children_con"> <block wx:for="{{treeVal.children}}"> <TreeNode treeVal="{{item}}"></TreeNode> </block> </view> </view>
JS部分
Component({ properties: { treeVal: Object } })
CSS部分
.children_con { padding-left: 50rpx; }
是不是很简单就实现了呢?