uni-app微信小程序创建树形组件

目录

1：前言

2：最终效果：

2.1一级菜单

2.2二级菜单

2.3三级菜单

3：实现方法

3.1：创建一级菜单

 3.2创建二级三级菜单

4：完整代码如下

1：前言

树形组件应用很广，应用于一些分层次的内容。vue有树形组件，但是uniapp没有树形组件，想要在uniapp使用树形组件，必须要自己写个树形组件。

2：最终效果：

2.1一级菜单

2.2二级菜单

2.3三级菜单

3：实现方法

3.1：创建一级菜单

建立一个view标签，遍历数据

1.  
   <view class="">
2.  
   <view class="" v-for="(item,index) in list" >
3.  
   <view>{{item.title}}</view>
4.  
   </view>
5.  
   </view>

之后在前面添加两个图标，两个图标分别对应点击前和点击后的不同的图标。view绑定方法，点击view时改变状态。使用v-if根据点击获取到的状态判断展示哪个图标。同时使用flex样式使图片和文字水平排列，并设置图片大小

1.  
   <view class="" v-for="(item,index) in list" >
2.  
   <view class="fold" @click="unfold(index)">
3.  
   <view class="tree-icon" v-if="item.fold">
4.  
   <image src="../../static/u.png"class="img" ></image>
5.  
    
6.  
    
7.  
   </view>
8.  
   <view class="tree-icon" v-else>
9.  
    
10.  
     
11.  
    <image src="../../static/down.png"class="img" ></image>
12.  
    </view>
13.  
    <view>{{item.title}}</view>
14.  
    </view>
15.  
     
16.  
    </view>
17.  
    <script>
18.  
    export default{
19.  
    data(){
20.  
    return{
21.  
    list:[
22.  
    {
23.  
    id:1,
24.  
     
25.  
    title:'七年级',
26.  
    fold:false
27.  
    },
28.  
    {
29.  
    id:2,
30.  
     
31.  
    title:'八年级',
32.  
    fold:false
33.  
    },
34.  
    {
35.  
    id:3,
36.  
     
37.  
    title:'九年级',
38.  
    fold:false
39.  
    }
40.  
    ],
41.  
    }
42.  
    },
43.  
    methods:{
44.  
    unfold(index){
45.  
    this.list[index].fold=!this.list[index].fold
46.  
    }
47.  
    }
48.  
    }
49.  
    </script>

css样式如下：

1.  
   .img{
2.  
   width: 20px;
3.  
   height: 20px;
4.  
   }
5.  
   .fold{
6.  
   display: flex;
7.  
   }

最终效果如下（设置好看的样式自己改）：

 3.2创建二级三级菜单

使用同样方法创建二级三级目录，使用v-if根据点击状态判断是否展示。

效果如下

4：完整代码如下

1.  
   <template>
2.  
   <view class="">
3.  
    
4.  
   <view class="" v-for="(item,index) in list" >
5.  
   <view class="fold" @click="unfold(index)">
6.  
   <view class="tree-icon">
7.  
   <view class="" v-if="item.fold">
8.  
   <image src="../../static/u.png"class="img" ></image>
9.  
    
10.  
     
11.  
    </view>
12.  
    <view class="tree-icon" v-else>
13.  
     
14.  
     
15.  
    <image src="../../static/down.png"class="img" ></image>
16.  
    </view>
17.  
    <view>{{item.title}}</view>
18.  
    </view>
19.  
     
20.  
    </view>
21.  
    <view class="" v-for="(item1,index1) in item.children" v-if="item.fold" @click="foldChildren(index,index1)">
22.  
    <view class="fold1">
23.  
    <view class="tree1">
24.  
    <image src="../../static/d.png" class="img" ></image>
25.  
     
26.  
     
27.  
    </view>
28.  
    <view class="tree-content">
29.  
    <text>{{item1.title}}</text>
30.  
    </view>
31.  
    </view>
32.  
     
33.  
    <view class="fold1" v-for="(item2,index2) in item1.children" v-if="item1.fold" >
34.  
    <view class="tree1">
35.  
     
36.  
     
37.  
    <u-icon class="icon-children" name="minus-circle" size="24.5px" color="#C0C0C0"></u-icon>
38.  
    </view>
39.  
    <view>
40.  
    <text>{{item2.title}}</text>
41.  
    </view>
42.  
     
43.  
    </view>
44.  
     
45.  
    </view>
46.  
     
47.  
     
48.  
     
49.  
    </view>
50.  
    </view>
51.  
    </template>
52.  
     
53.  
    <script>
54.  
    export default{
55.  
    data(){
56.  
    return{
57.  
    list:[
58.  
    {
59.  
    id:1,
60.  
     
61.  
    title:'七年级',
62.  
    fold:false,
63.  
    children:[
64.  
    {
65.  
    title:'第一单元',
66.  
    fold:false,
67.  
    children:[
68.  
    {
69.  
    title:'密度基础'
70.  
    },
71.  
    {
72.  
    title:'密度计算'
73.  
    }
74.  
    ]
75.  
    }
76.  
    ]
77.  
    },
78.  
    {
79.  
    id:2,
80.  
     
81.  
    title:'八年级',
82.  
    fold:false,
83.  
    children:[
84.  
    {
85.  
    title:'第一单元',
86.  
    fold:false,
87.  
    children:[
88.  
    {
89.  
    title:'密度基础'
90.  
    },
91.  
    {
92.  
    title:'密度计算'
93.  
    }
94.  
    ]
95.  
    },
96.  
    {
97.  
    title:'第二单元',
98.  
    fold:false
99.  
    },
100.  
     {
101.  
     title:'第三单元',
102.  
     fold:false
103.  
     },
104.  
     ]
105.  
     },
106.  
     {
107.  
     id:3,
108.  
      
109.  
     title:'九年级',
110.  
     fold:false
111.  
     }
112.  
     ],
113.  
     }
114.  
     },
115.  
     methods:{
116.  
     unfold(index){
117.  
     this.list[index].fold=!this.list[index].fold
118.  
     },
119.  
     foldChildren(index,index1){
120.  
      
121.  
     this.list[index].children[index1].fold=!this.list[index].children[index1].fold
122.  
     }
123.  
     }
124.  
     }
125.  
     </script>
126.  
      
127.  
     <style>
128.  
     .tree-icon{
129.  
     display: flex;
130.  
     }
131.  
     .img{
132.  
     width: 20px;
133.  
     height: 20px;
134.  
     }
135.  
     .fold{
136.  
      
137.  
     }
138.  
     .fold1{
139.  
     display: flex;
140.  
     }
141.  
     </style>

这篇好文章是转载于：学新通技术网