微信小程序treeview

這是昨晚加班的時候，用微信小程序寫的一個treeview組件。

先來看看效果圖吧！

比較簡單吧，直接view布局。

移動端實現treeview類似的效果，有大的局限性。首先受設備寬度的影響，如果像PC端那樣，顯得那么有層次感，在移動設備上，有可能很丑的。這里，有一條線，將同一節點通過一條豎線連接起來，這樣，不會因為層次問題，導致內容換行。

<!--pages/demo/demo.wxml-->
<import src="/templates/chapter.wxml" />
<view class='tree'>
  <block wx:for="{{chapters}}" wx:key="item">
    <!---list-item beign-->
    <template is='node' data='{{node:item,expend:item.expend}}' />
    <!---list-item end-->
    <template is='nodes' data='{{nodes:item.children,expend:item.expend}}' />
  </block>
</view>
<!--底部聲明 begin-->
<view class="page__bd page__bd_spacing">
  <view class="weui-footer">
    <view class="weui-footer__links">
      <navigator url="" class="weui-footer__link">習刷刷</navigator>
    </view>
    <view class="weui-footer__text">Copyright © 2018-2032 www.xsstk.com</view>
  </view>
</view>
<!--底部聲明 end-->

其中引用了一個模板(chapter)。

js中聲明了幾個方法。

//節點點擊事件
  nodeClick: function(e) {
    var list = this.data.chapters;
    var that = this;
    this.setTreeValue(e.currentTarget.dataset.id, list, function(t) {
      t.expend = !t.expend;
      //如果關閉節點，則遞歸調用
      if (t.expend === false) {
        that.closeNode(t);
      }
    });
    this.setData({
      chapters: list
    }); //刷新數據
  },
  //設置節點值
  setTreeValue: function(id, list, callback) {
    var that = this;
    for (var i in list) {
      var node = list[i];
      if (node.id === id) {
        callback && callback(node);
        return;
      } //跳出循環
      node.children && that.setTreeValue(id, node.children, callback); //遞歸循環
    }
  },
  //關閉節點
  closeNode: function(node) {
    var that = this;
    node.expend = false;
    node.children && node.children.forEach(function(t, i) {
      that.closeNode(t); //遞歸關閉節點
    });
  }