因为项目需求,需要一个树形下拉选择框,参考了网上的树形结构整理出了这样一个效果图
下载地址:wx_treeSelect下载
其实主要还是参考了treeview的递归思想 微信小程序实现简单的树形图treeview 绘制出下拉框内的内容,在加个状态判断展开隐藏下拉框,方法回调显示选择值 其实思想还是很容易的 接下来直接上代码
1.首先新建树形菜单组件 —— mytree
(1) mytree.wxml
<view class="container">
<view style="padding:5rpx 0;">
<image wx:if='{
{ isBranch }}' bindtap='toggle' src="{
{ open ? '/image/show_less.png' : '/image/show_more.png'}}" class='item-sImg'></image>
<image wx:else src='/image/page_turning_right.png' class='item-sImg'></image>
<text bindtap='tapItem' data-itemid='{
{ model.id }}' data-value='{
{ model.text }}'>{
{
model.text }}</text>
</view>
<view style='padding-left: 25rpx;' wx:if='{
{ isBranch }}' hidden='{
{ !open }}'>
<mytree wx:for='{
{ model.nodes }}' wx:key='id' model='{
{ item }}'></mytree>
</view>
</view>
(2) mytree.wxss
.container{
font-size: 30rpx;
color: #333;
}
.item-sImg{
width: 40rpx;
height: 40rpx;
vertical-align: middle;
}
(3) mytree.json
{
"component": true,
"usingComponents": {
"mytree": "../mytree/mytree"
}
}
(4) mytree.js
Component({
properties: {
model: Object,
},
data: {
open: true,
isBranch: false,
},
methods: {
toggle: function(e) {
if (this.data.isBranch) {
this.setData({
open: !this.data.open,
})
}
},
tapItem: function(e) {
var itemid =