在小程序当中渲染树

  1. 首页
  2. 新闻资讯
  3. 正文

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

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

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; }

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

上一个：win11系统如何修改日期格式

下一个：定时器中 this 指向修改实现方法和原理讲解

热门文章

归纳