uniapp微信小程序如何创建树形组件

用哲学改造人生

已于 2023-01-10 19:39:56 修改

阅读量2.9k

点赞数 3

文章标签：微信小程序 uni-app vue.js

于 2023-01-10 19:21:52 首次发布

本文链接：https://blog.csdn.net/m0_61049323/article/details/128611528

版权

1：前言

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

2：最终效果：

2.1一级菜单

2.2二级菜单

2.3三级菜单

3：实现方法

3.1：创建一级菜单

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

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

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

<view class="" v-for="(item,index) in list" >
			<view class="fold" @click="unfold(index)">
				<view class="tree-icon" v-if="item.fold">
					 <image src="../../static/u.png"class="img" ></image>
							        
				
				  </view>
						<view class="tree-icon" v-else>
											
													        
					    <image src="../../static/down.png"class="img" ></image>
				 </view>
				 <view>{{item.title}}</view>
			</view>
			
		</view>
<script>
	export default{
		data(){
			return{
				list:[
					{
						id:1,
						
						title:'七年级',
						fold:false
					},
					{
						id:2,
						
						title:'八年级',
						fold:false
					},
					{
						id:3,
						
						title:'九年级',
						fold:false
					}
				],
			}
		},
		methods:{
			unfold(index){
				this.list[index].fold=!this.list[index].fold
			}
		}
	}
</script>

css样式如下：

.img{
		width: 20px;
		height: 20px;
	}
.fold{
		display: flex;
	}

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

3.2创建二级三级菜单

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

效果如下

4：完整代码如下

<template>
	<view class="">
		
		<view class="" v-for="(item,index) in list" >
			<view class="fold" @click="unfold(index)">
				<view class="tree-icon">
					<view class="" v-if="item.fold">
						 <image src="../../static/u.png"class="img" ></image>
								        
					
					  </view>
							<view class="tree-icon" v-else>
												
														        
						    <image src="../../static/down.png"class="img" ></image>
					 </view>
					  <view>{{item.title}}</view>
				</view>
				
			</view>	
				 <view class="" v-for="(item1,index1) in item.children" v-if="item.fold" @click="foldChildren(index,index1)">
				 	<view class="fold1">
				 		<view class="tree1">
				 			<image src="../../static/d.png" class="img" ></image>
				 					        
				 		  
				 		  </view>
				 		<view class="tree-content">
				 			<text>{{item1.title}}</text>
				 		</view>
				 	</view>
				 	
				 	<view class="fold1"  v-for="(item2,index2) in item1.children" v-if="item1.fold" >
				 		<view class="tree1">
				 			
				 					        
				 		  <u-icon class="icon-children"  name="minus-circle" size="24.5px" color="#C0C0C0"></u-icon>
				 		  </view>
				 		<view>
				 			<text>{{item2.title}}</text>
				 		</view>
				 		
				 	</view>
				 	
				 </view>
			
		
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[
					{
						id:1,
						
						title:'七年级',
						fold:false,
						children:[
							{
								title:'第一单元',
								fold:false,
								children:[
									{
										title:'密度基础'
									},
									{
										title:'密度计算'
									}
								]
							}
						]
					},
					{
						id:2,
						
						title:'八年级',
						fold:false,
						children:[
							{
								title:'第一单元',
								fold:false,
								children:[
									{
										title:'密度基础'
									},
									{
										title:'密度计算'
									}
								]
							},
							{
								title:'第二单元',
								fold:false
							},
							{
								title:'第三单元',
								fold:false
							},
						]
					},
					{
						id:3,
						
						title:'九年级',
						fold:false
					}
				],
			}
		},
		methods:{
			unfold(index){
				this.list[index].fold=!this.list[index].fold
			},
			foldChildren(index,index1){
				
				this.list[index].children[index1].fold=!this.list[index].children[index1].fold
			}
		}
	}
</script>

<style>
	.tree-icon{
		display: flex;
	}
	.img{
		width: 20px;
		height: 20px;
	}
	.fold{
		
	}
	.fold1{
		display: flex;
	}
</style>