微信小程序實現側邊欄二級聯動

<scroll-view scroll-y="{{true}}" 
              style="height:{{height}}px;" 
              class="nav-right-menu">
      <!-- 一級菜單 -->
  <view class="nav-left-menu-list" 
        wx:for="{{Menu}}" 
        wx:for-index="idMenu" 
        wx:key="id">
    <view data-index="{{idMenu}}" 
          class="nav-left-menu-text" 
          bindtap="showmenu2" 
          data-len="{{item.childLen}}">
      <text>{{item.txt}}</text>
    </view>
    <!-- 二級菜單 -->
    <view class="nav-left-secondmenu" 
          style="{{menuindex == idMenu ? menustyle : field}}">
      <view class='nav-left-secondmenu-list' 
            wx:for="{{item.twoMenu}}" 
            wx:for-item="twoMenu" 
            wx:key="id" 
            bindtap="dosub" 
            data-url="{{twoMenu.menupath}}">
        <text class='nav-left-Secondmenu-text'>{{twoMenu.name}}</text>
      </view>
    </view>
  </view>
</scroll-view>

// pages/home/index.js
var app = getApp();
var systeminfo = null;
var currentMenuIndex = -1;
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    height: 0,
    Menu:[]
  },
  showmenu2: function (event) {//顯示2級菜單
    var currentindex = event.currentTarget.dataset.index;
    var len = event.currentTarget.dataset.len;
    if (currentindex == currentMenuIndex) {
      currentMenuIndex = -1;
      len = 0;
    }
    else {
      currentMenuIndex = currentindex;
      len = len * 40;
    }
    this.setData({
      menuindex: currentMenuIndex,
      menustyle: "height:" + len + "px;transition:height 0.24s"
    })
  },
  showmenu: function (event) {//顯示一級菜單
    this.setData({
      showmask: true,
      toolclass: "showmenu",
      isscroll: false
    })
  },
  hidemenu: function () {
    this.setData({
      showmask: false,
      toolclass: "hidemenu",
      isscroll: true
    })
  },
  dosub: function (e) {
    var path = e.currentTarget.dataset.url;
    var obj = this;
    wx.navigateTo({
      url: path,
      success: function (e) {
        obj.setData({
          isscroll: true,
          showmask: false,
          toolclass: "hidemenu"
        })
      }
    })
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this;
    var menujson = require("../../utils/side.js");
    let side = menujson.getside();
    console.log(side)
    that.setData({
      Menu: side
    })
  }
})

var side = [
  {
    "txt": "女裝",
    "id": "1",
    "childLen": 3,
    "twoMenu": [
      {
        "id": "3",
        "name": "連衣裙",
        "menupath": ""
      },
      {
        "id": "4",
        "name": "雪紡襯衣/T恤",
        "menupath": ""
      },
      {
        "id": "5",
        "name": "套裝",
        "menupath": ""
      }
    ]
  },
  {
    "txt": "男裝",
    "id": "2",
    "childLen": 4,
    "twoMenu": [
      {
        "id": "6",
        "name": "襯衣",
        "menupath": ""
      },
      {
        "id": "7",
        "name": "T恤",
        "menupath": ""
      }
    ]
  }
]
const getside = () => {
  return side;
}
module.exports = {
  getside: getside
}