微信小程序如何實現(xiàn)側(cè)邊欄二級聯(lián)動

今天小編給大家分享一下微信小程序如何實現(xiàn)側(cè)邊欄二級聯(lián)動的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

實現(xiàn)效果如下

實現(xiàn)步驟

樣式布局(.wxml文件)

<scroll-view scroll-y="{{true}}" 
               
              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" 
          >
      <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>

js文件

// pages/home/index.js
var app = getApp();
var systeminfo = null;
var currentMenuIndex = -1;
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  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"
        })
      }
    })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    var that = this;
    var menujson = require("../../utils/side.js");
    let side = menujson.getside();
    console.log(side)
    that.setData({
      Menu: side
    })
  }
})

數(shù)據(jù)文件（side.js）

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
}

最后頁面顯示出來了，也可以將side文件寫入data里面，此處只是將文件寫入外部，進行模塊的導入，兩種方法都可以。

以上就是“微信小程序如何實現(xiàn)側(cè)邊欄二級聯(lián)動”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。