?
目錄
?
1：前言
2：最終效果：
2.1一級菜單
2.2二級菜單
2.3三級菜單
3：實現(xiàn)方法
3.1：創(chuàng)建一級菜單
?3.2創(chuàng)建二級三級菜單
4：完整代碼如下
1：前言
樹形組件應(yīng)用很廣，應(yīng)用于一些分層次的內(nèi)容。vue有樹形組件，但是uniapp沒有樹形組件，想要在uniapp使用樹形組件，必須要自己寫個樹形組件。
2：最終效果：
?
2.1一級菜單
2.2二級菜單
2.3三級菜單
3：實現(xiàn)方法
3.1：創(chuàng)建一級菜單
建立一個view標簽，遍歷數(shù)據(jù)
<view class="">
<view class="" v-for="(item,index) in list" >
<view>{{item.title}}</view>
</view>
</view>之后在前面添加兩個圖標，兩個圖標分別對應(yīng)點擊前和點擊后的不同的圖標。view綁定方法，點擊view時改變狀態(tài)。使用v-if根據(jù)點擊獲取到的狀態(tài)判斷展示哪個圖標。同時使用flex樣式使圖片和文字水平排列，并設(shè)置圖片大小
<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; }
最終效果如下（設(shè)置好看的樣式自己改）：
?3.2創(chuàng)建二級三級菜單
使用同樣方法創(chuàng)建二級三級目錄，使用v-if根據(jù)點擊狀態(tài)判斷是否展示。
效果如下文章來源：http://www.zghlxwxcb.cn/news/detail-572257.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-572257.html
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:'密度基礎(chǔ)'
},
{
title:'密度計算'
}
]
}
]
},
{
id:2,
title:'八年級',
fold:false,
children:[
{
title:'第一單元',
fold:false,
children:[
{
title:'密度基礎(chǔ)'
},
{
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>
到了這里，關(guān)于uniapp微信小程序如何創(chuàng)建樹形組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
