您现在的位置是:网站首页> 编程资料编程资料

微信小程序实现侧边栏二级联动_javascript技巧_

2023-05-24 330人已围观

简介 微信小程序实现侧边栏二级联动_javascript技巧_

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

实现效果如下

实现步骤

样式布局(.wxml文件)

                     {{item.txt}}                              {{twoMenu.name}}               

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

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

-六神源码网