我們可以很輕松的去遍歷一棵樹，無論是廣度優先遍歷還是深度優先遍歷，那么怎么在小程式當中渲染一棵樹呢？
先看一下我們深度優先遍歷的代碼
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" >
<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.uj5u.com/qiye/457607.html
標籤：Html/Css