微信小程序 tree组件

Posted 2022-12-25 zero-zm

1. 根目录下新建tree组件 /components/tree/tree.wxml.js.wxss.json

(1). tree.wxml

<!-- 多级树 -->
<view class="tree_container">
  <!-- 一级菜单 -->
  <view style="padding-left: treeListIndex*8px">
    <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. 效果预览