微信小程序简单树状图的实现

由于微信没有树状图这个组件，自己做了个简简单单的树状图，有需要的可以参考下我这个。
先上图

实现了三级，如果有更多级别的需求，可以参考我的规律进行添加。
下面是wxml的代码

<view>
    <view class="box_1" bindtap="change_box1">
      <view style="transform: rotate({{du1}}deg);">
        <image  class="sjx" src="../../images/sjx.png"></image>
      </view>
      <view style="margin-left:5px">
        所有电表
      </view>
    </view>
    <view wx:for="{{box_2}}" hidden="{{box2_hidden}}">
      <view class="box_2" bindtap="box3_show" data-index="{{index}}">
        <view style="transform: rotate({{item.du2}}deg);">
          <image class="sjx" src="../../images/sjx.png"></image>
        </view>
        <view style="margin-left:5px">{{item.name}}</view>
      </view>
       
      <view hidden="{{item.box3_hidden}}" >
        <view wx:for="{{item.son}}" class="box_3">
          <view style="transform: rotate({{du3}}deg);">
            <image class="sjx" src="../../images/sjx.png"></image>
          </view>
          <view>{{item}}</view>
        </view>
      </view>
    </view>
  </view>

看到这里，可能就有人问了，这个图片是个啥？那我就好人做到底，上图！

没错，这个图片就是三角形，需要的可以下载然后改下图片路径或名称！
下面就是js代码了
先来看data里的数据有哪些

	du1:0,
    box_2:[
      {
        'name':'深圳1',
        "box3_hidden":true,
        "du2":0,
        son:['电表1','电表2']
      },
      {
        'name':'深圳2',
        "box3_hidden":true,
        "du2":0,
        son:['电表3','电表4']
      },
      {
        'name':'深圳3',
        "box3_hidden":true,
        "du2":0,
        son:[]
      }
    ],
    
    box2_hidden:true,
    du3:0,

然后下面是函数

box3_show:function(res){
    var that=this
    var index=res.currentTarget.dataset.index
    var box_2=JSON.parse(JSON.stringify(that.data.box_2))
    if(box_2[index].du2==90){
      box_2[index].du2=0
      box_2[index].box3_hidden=true
    }else{
      if(box_2[index].son){
        box_2[index].box3_hidden=false
        box_2[index].du2=90
      }
    }
    that.setData({
      box_2
    })
  },
  change_box1:function(){
    var du1=this.data.du1
    if(du1==0){
      du1=90
    }else{
      du1=0
    }
    this.setData({
      du1
    })
    var hidden=this.data.box2_hidden
    if(hidden==true &&this.data.box_2){
      hidden=false
    }else{
      hidden=true
    }
    this.setData({
      box2_hidden:hidden
    })
  },

下面是wxss代码

.sjx{
  width: 15px;
  height: 15px;
}
.box_1{
  display: flex;
}
.box_2{
  display: flex;
  margin: 10px 0 10px 20px;
}
.box_3{
  display: flex;
  margin: 10px 0 10px 40px;
}

看到这里，就知道这个demo真的很简单，本人也是一枚小白，有什么不足的地方还请大家多多指教。