小程序实现无限级树形菜单_小程序 树菜单

效果图：

源码地址：https://download.csdn.net/download/qq_42205731/19547193

实现思路：  组件的递归调用

mytree为组件，最主要的在组件的自调用。

   mytree.json

{
  "component": true,
  "usingComponents": {
    "mytree": "../mytree/mytree"
  }
}

mytree.wxml

<view class="ul">
  <view class="li-item" bindtap='{{isBranch?"toggle":"tapItem"}}' data-itemid='{{ model.id }}'>
    <text>{{model.text}}</text>
    <image src="https://open.oss.taozhi.cn/audiobook/asset/read/{{open?'shangla':'xiala'}}.png" class="menu-img" wx:if='{{ isBranch }}' ></image>
  </view>
  <view style='padding-left: 50rpx;' wx:if='{{ isBranch }}' hidden='{{ !open }}'>
    <mytree wx:for='{{ model.childMenus }}' wx:key='id' model='{{ item }}'></mytree>
  </view>
</view>

mytree.js

// pages/components/mytree/mytree.js
Component({
  properties: {
    model: Object,
  },
  data: {
    open: false,     //是否展开
    isBranch: false, //是否有子级
  },
 
  methods: {
    toggle: function (e) {
      if (this.data.isBranch) {
        this.setData({
          open: !this.data.open,
        })
      }
    },
    tapItem: function (e) {
      var itemid = e.currentTarget.dataset.itemid;
      console.log('组件里点击的id: ' + itemid);
      this.triggerEvent('tapitem', { itemid: itemid }, { bubbles: true, composed: true });
    }
  },
 
  ready: function (e) {
    this.setData({
      isBranch: Boolean(this.data.model.childMenus && this.data.model.childMenus.length),
    });
    console.log(this.data);
  },
})

要引用的页面

<!--index.wxml-->
<view>
  <mytree model='{{ treeData }}' bind:tapitem='tapItem'></mytree>
</view>

treeData数据

treeData: {
      text: 'My Tree',
      id: 0,
      childMenus: [
        {
          text: 'Parent 1',
          id: 1,
          childMenus: [
            {
              text: 'Child 1',
              id: 2,
              childMenus: [
                {
                  text: 'Grandchild 1',
                  id: 3,
                },
                {
                  text: 'Grandchild 2',
                  id: 4,
                },
              ]
            },
            {
              text: 'Child 2',
              id: 5,
            }
          ]
        },
        {
          text: 'Parent 2',
          id: 6,
          childMenus: [
            {
              text: 'Child 1',
              id: 7,
            },
            {
              text: 'Child 2',
              id: 8,
            }
          ]
        }
      ]
    },