微信小程序组件 —— 树形下拉框

因为项目需求，需要一个树形下拉选择框，参考了网上的树形结构整理出了这样一个效果图

下载地址：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 = e.curre