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

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

.nav-right-menu { width: 100%; background-color: rgb( 34, 153, 213 ); height: 100%; z-index: 2; } .nav-left-menu-list { margin: 0 auto; width: 90%; border-bottom: 1px solid white; text-align: center; padding-top: 10px; padding-bottom: 10px; z-index: 3; } .nav-left-menu-text { color: white; } .nav-left-secondmenu { width: 100%; height: 0; overflow: hidden; transition: height 0.24s; } .nav-left-secondmenu-list { width: 100%; margin-top: 5px; padding-top: 5px; text-align: center; padding-bottom: 5px; background-color: rgb( 249, 114, 26 ); border-radius: 5px; }

.nav-left-Secondmenu-text { color: white; font-size: 12px; }

.showmenu { left: 0%; } .hidemenu { left: -60%; }

// pages/home/index.js var app = getApp(); var systeminfo = null; var currentMenuIndex = - 1; Page({ /** * 页面的初始数据 */ data: { height: 0, Menu: null, }, 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 menujson = require( "../../utils/side.js"); that.setData({ Menu:menujson.getside() }) } })

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 }