在小程序当中渲染树(小程序渲染是什么意思)

我们可以很轻松的去遍历一棵树，无论是广度优先遍历还是深度优先遍历，那么怎么在小程序当中渲染一棵树呢？ 先看一下我们深度优先遍历的代码 function dfs(tree) { if(!tree) return console.log(tree.value) if (tree.children) { ...

推荐整理分享在小程序当中渲染树(小程序渲染是什么意思)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:小程序如何实现列表渲染,小程序渲染是什么意思,小程序获取数据后怎么渲染到页面,微信小程序的渲染方式,小程序获取数据后怎么渲染到页面,在小程序当中渲染怎么弄,微信小程序的渲染方式,在小程序当中渲染怎么弄,内容如对您有帮助，希望把文章链接给更多的朋友！

我们可以很轻松的去遍历一棵树，无论是广度优先遍历还是深度优先遍历，那么怎么在小程序当中渲染一棵树呢？

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

function dfs(tree) {if(!tree) returnconsole.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;}

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