微信小程序树形结构代码
时间: 2023-08-01 17:07:24 浏览: 36
以下是一个简单的微信小程序树形结构代码示例:
wxml部分:
```
<template name="node" data="{{node}}">
<view class="node">
<view class="node-title">{{node.title}}</view>
<view class="node-content">{{node.content}}</view>
<block wx:if="{{node.children}}">
<view class="node-children">
<template wx:for="{{node.children}}" wx:for-item="child">
<template is="node" data="{{node:child}}"></template>
</template>
</view>
</block>
</view>
</template>
<template is="node" data="{{node:tree}}"></template>
```
js部分:
```
Page({
data: {
tree: {
title: 'Root',
content: 'This is the root node',
children: [
{
title: 'Node 1',
content: 'This is node 1',
children: [
{
title: 'Node 1.1',
content: 'This is node 1.1'
},
{
title: 'Node 1.2',
content: 'This is node 1.2'
}
]
},
{
title: 'Node 2',
content: 'This is node 2'
}
]
}
}
})
```
这个示例定义了一个名为 "node" 的模板,可以使用它来递归渲染树形结构。在Page的data中定义了一个名为 "tree" 的树形对象,包含了一个根节点和若干子节点。最后,在wxml中使用模板,将 "tree" 对象传递给 "node" 模板即可渲染出整个树形结构。