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

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

实现效果如下

实现步骤

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

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

查看更多关于微信小程序实现侧边栏二级联动的详细内容...