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

更新時間：2022年07月17日 08:59:00 作者：今天星期八

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)側邊欄二級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)側邊欄二級聯(lián)動的具體代碼，供大家參考，具體內容如下

實現(xiàn)效果如下

實現(xiàn)步驟

樣式布局(.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({
? /**
? ?* 頁面的初始數(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里面，此處只是將文件寫入外部，進行模塊的導入，兩種方法都可以。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: