微信小程序treeview

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

这是昨晚加班的时候，用微信小程序写的一个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); //递归关闭节点
    });
  }