微信小程序Tree自定义控件实现

最新推荐文章于 2025-04-02 16:43:01 发布

原创

最新推荐文章于 2025-04-02 16:43:01 发布 · 置顶 · 6.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序Tree控件 #微信小程序树控件

本文介绍如何在微信小程序中自定义实现Tree控件，详细讲解了相关步骤和关键点，帮助开发者掌握这一功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在微信小程序中实现Tree控件

之前在网上搜索了关于微信小程序tree控件的实现，但是发现居然没有人去做tree控件，因此本人下定决心凭借自己一个多月的自学能力给大家分享一下自己的小成果。
第一步：创建tree自定义控件
       **1.创建js文件treebar.js**
        //获取应用实例
		const app = getApp()
		Component({
		
		  /**
		   * 组件的属性列表
		   */
		  properties: {
		    serval: {
		      type: 'String',
		      value: '组线名称'
		    }
		  },
		
		  /**
		   * 组件的初始数据
		   */
		  data: {
		    treeList:[],
		    treeData: [{ id: 1, parentId: 0, name: "一级菜单A", rank: 1, code:'1'},// rank:代表第几级树节点；code：代表包含哪些子节点ID；
		      { id: 2, parentId: 0, name: "一级菜单B", rank: 1, code: '2' },
		      { id: 3, parentId: 0, name: "一级菜单C", rank: 1, code: '3' },
		      { id: 4, parentId: 1, name: "二级菜单A-A", rank: 2, code: '1,4' },
		      { id: 5, parentId: 1, name: "二级菜单A-B", rank: 2, code: '1,5' },
		      { id: 6, parentId: 2, name: "二级菜单B-A", rank: 2, code: '2,6' },
		      { id: 7, parentId: 4, name: "三级菜单A-A-A", rank: 3, code: '1,4,7' },
		      { id: 8, parentId: 7, name: "四级菜单A-A-A-A", rank: 4, code: '1,4,7,8' },
		      { id: 9, parentId: 8, name: "五级菜单A-A-A-A-A", rank: 5, code: '1,4,7,8,9' },
		      { id: 10, parentId: 9, name: "六级菜单A-A-A-A-A-A", rank: 6, code: '1,4,7,8,9,10' },
		      { id: 11, parentId: 10, name: "七级菜单A-A-A-A-A-A-A", rank: 7, code: '1,4,7,8,9,10,11' },
		      { id: 12, parentId: 11, name: "八级菜单A-A-A-A-A-A