在小程序当中渲染树

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

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

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

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

 

    原文作者:小影影
    原文地址: https://www.cnblogs.com/lifengying/p/16123362.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞