树形菜单
发布于 6 年前 作者 liangyan 9873 次浏览 来自 问答

有没有树形菜单,或者怎么实现?

1 回复

写过的一个小例子,看看适不适合你

components – tree

file: tree.js

allClassifyArr: [{
className: '分类1',
classId: 'c1',
children: [{
className: '二级分类1',
classId: 'cc1'
}, {
className: '二级分类2',
classId: 'cc2'
}]
}, {
className: '分类2',
classId: 'c2',
children: [{
className: '二级分类1',
classId: 'cc1',
children: [{
className: '三级分类1',
classId: 'ccc1',
children: [{
className: '四级分类1',
classId: 'ccc1',
}]
}]
}, {
className: '二级分类2',
classId: 'cc2'
}]
}, {
className: '分类3',
classId: 'c3',
children: [{
className: '二级分类1',
classId: 'cc1'
},]
}, {
className: '分类4',
classId: 'c4',
children: [{
className: '二级分类1',
classId: 'cc1'
}, {
className: '二级分类2',
classId: 'cc2'
}]
}, {
className: '分类5',
classId: 'c5',
children: [{
className: '二级分类1',
classId: 'cc1'
}, {
className: '二级分类2',
classId: 'cc2'
}]
}, {
className: '分类6',
classId: 'c6',
children: [{
className: '二级分类1',
classId: 'cc1'
}, {
className: '二级分类2',
classId: 'cc2'
}]
}],

file: tree.wxml

<view>
tree
<tree-child wx:for="{{ allClassifyArr }}" itemdata="{{ item }}"></tree-child>
</view>

components – tree-child

file: tree-child.js

properties: {
itemdata: {
type: Object, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: {}, // 属性初始值(可选),如果未指定则会根据类型选择一个
}
},

file: tree-child.wxml

<view>
<text>{{ itemdata.className }}</text>
<tree-child wx:for="{{ itemdata.children }}" itemdata="{{ item }}" ></tree-child>
</view>

file: tree-child.json

{
"component": true,
"usingComponents": {
"tree-child-one": "../tree-child-one/tree-child-one"
}
}

回到顶部