微信小程序实现侧边栏二级联动

本文实例为大家分享了微信小程序实现侧边栏二级联动的具体代码，供大家参考，具体内容如下

实现效果如下

实现步骤

样式布局(.wxml文件)

<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>

js文件

// 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
    })
  }
})

数据文件（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里面，此处只是将文件写入外部，进行模块的导入，两种方法都可以。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。