微信 html tree,微信小程序 tree组件

1. 根目录下新建tree组件 /components/tree/tree.wxml.js.wxss.json

(1). tree.wxml

{{treeList.text}}

(2). tree.js

// components/tree/tree.js

Component({

/**

* 组件的属性列表

*/

properties: {

treeListIndex: {// 默认为0，当前循环的第几层，用于tree样式展示

type: Number,

value: 0

},

treeList: Object

},

/**

* 组件的初始数据

*/

data: {

collapse: true // 每个tree组件对应自己的collapse属性；(true:折叠/false:展开;)

},

/**

* 组件的方法列表

*/

methods: {

tapTreeItem: function(e) { // 点击项

var item = e.currentTarget.dataset.item;

if (item.nodes !== undefined) { // 其下有子节点，可折叠展开操作

this.setData({ // 折叠展开操作

collapse: !this.data.collapse,

})

} else { // 最终子节点

this.triggerEvent('treeTap', { item }); // 将当前的点击项的数据传递给父页面

}

},

treenodetap: function(e) { // 递归的最终子节点

var item = e.detail.item;

this.triggerEvent('treeTap', { item }); // 将当前的点击项的数据传递给父页面

}

}

})

(3). tree.wxss

/* components/tree/tree.wxss */

@import '/weui.wxss'; // 引入weui.wxss； 微信提供的组件库

.tree_container {

background:#fff;

border-bottom: 1rpx solid rgba(0,0,0,.1);

}

.nocollapse_icon { /*展开图片*/

transform: rotate(90deg);

}

.tree_text {

display: inline-block;

vertical-align: middle;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

width: 90%;

}

(4). tree.json

{

"component": true,

"usingComponents": {

"tree": "/components/tree/tree"

}

}

2. page文件夹下新建页面detail /page/detail/detail.wxml/wxss/js/json

(1). detail.wxml

(2). detail.js

data: {

treeList: {

text: '第一单元',

id: 0,

nodes: [

{

text: '理财入门之基本经济指标与经济学原理',

id: 1,

nodes: [

{

text: '正确理解理财之理财就是理生活',

id: 2,

nodes: [

{

text: '现金规划管理(上)',

id: 3,

},

{

text: '现金规划管理 (下)',

id: 4,

},

]

},

{

text: 'Child 2',

id: 5,

}

]

},

{

text: 'Parent 2',

id: 6,

nodes: [

{

text: 'Child 1',

id: 7,

},

{

text: 'Child 2',

id: 8,

}

]

}

]

}

}

(3). detail.json

{

"navigationBarTitleText": "树组件",

"usingComponents": {

"tree": "/components/tree/tree"

}

}

3. 效果预览