微信小程序 tree組件

1. 根目錄下新建tree組件 /components/tree/tree.wxml.js.wxss.json

(1). tree.wxml

<!-- 多級樹 -->
<view class="tree_container">
  <!-- 一級菜單 -->
  <view style="padding-left: {{treeListIndex*8}}px">
    <view bindtap='tapTreeItem' class="weui-cell weui-cell_access" data-item="{{treeList}}">
      <view class="weui-cell__bd">
          <view class="tree_text">{{treeList.text}}</view>
      </view>
      <view wx:if="{{treeList.nodes}}" class="weui-cell__ft weui-cell__ft_in-access {{!collapse ? 'nocollapse_icon' : ''}}"></view>
    </view>
    <!-- 遞歸菜單 -->
    <block wx:if="{{treeList.nodes && !collapse}}">
      <tree wx:for='{{treeList.nodes}}' wx:key='id' treeList='{{ item }}' treeListIndex='{{treeListIndex+1}}' bind:treeTap="treenodetap"></tree>
    </block>
  </view>
</view>

(2). tree.js

// components/tree/tree.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    treeListIndex: {// 默認爲0，當前循環的第幾層，用於tree樣式展現
      type: Number,
      value: 0
    },
    treeList: Object
  },

  /**
   * 組件的初始數據
   */
  data: {
    collapse: true // 每一個tree組件對應本身的collapse屬性；（true:摺疊/false:展開;）
  },

  /**
   * 組件的方法列表
   */
  methods: {
    tapTreeItem: function(e) { // 點擊項
      var item = e.currentTarget.dataset.item;
      if (item.nodes !== undefined) { // 其下有子節點，可摺疊展開操做
        this.setData({ // 摺疊展開操做
          collapse: !this.data.collapse,
        })
      } else { // 最終子節點
        this.triggerEvent('treeTap', { item }); // 將當前的點擊項的數據傳遞給父頁面
      }
    },
    treenodetap: function(e) { // 遞歸的最終子節點
      var item = e.detail.item;
      this.triggerEvent('treeTap', { item }); // 將當前的點擊項的數據傳遞給父頁面
    }
  }
})

(3). tree.wxss

/* components/tree/tree.wxss */
@import '/weui.wxss'; // 引入weui.wxss； 微信提供的組件庫

.tree_container {
  background:#fff;
  border-bottom: 1rpx solid rgba(0,0,0,.1);
}
.nocollapse_icon { /*展開圖片*/
  transform: rotate(90deg);
}
.tree_text {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 90%;
}

(4). tree.json

{
  "component": true,
  "usingComponents": {
    "tree": "/components/tree/tree"
  }
}

2. page文件夾下新建頁面detail /page/detail/detail.wxml/wxss/js/json

(1). detail.wxml

<view>
  <tree treeList="{{treeList}}" bind:treeTap="treeTap"></tree>
</view>

(2). detail.js

data: {
    treeList: {
      text: '第一單元',
      id: 0,
      nodes: [
        {
          text: '理財入門之基本經濟指標與經濟學原理',
          id: 1,
          nodes: [
            {
              text: '正確理解理財之理財就是理生活',
              id: 2,
              nodes: [
                {
                  text: '現金規劃管理（上）',
                  id: 3,
                },
                {
                  text: '現金規劃管理 （下）',
                  id: 4,
                },
              ]
            },
            {
              text: 'Child 2',
              id: 5,
            }
          ]
        },
        {
          text: 'Parent 2',
          id: 6,
          nodes: [
            {
              text: 'Child 1',
              id: 7,
            },
            {
              text: 'Child 2',
              id: 8,
            }
          ]
        }
      ]
    }
  }

(3). detail.json

{
  "navigationBarTitleText": "樹組件",
  "usingComponents": {
    "tree": "/components/tree/tree"
  }
}

3. 效果預覽