李朝强的博客

人之为学,如饮河海,大饮则大盈,小饮则小颖!
posts - 35, comments - 144, trackbacks - 0, articles - 2
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

微信小程序treeview

Posted on 2018-10-13 11:31 李朝强 阅读(...) 评论(...) 编辑 收藏

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