您现在的位置是:网站首页> 编程资料编程资料
微信小程序实现侧边栏二级联动_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里面,此处只是将文件写入外部,进行模块的导入,两种方法都可以。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相关内容
- 微信小程序自定义tab实现多层tab嵌套_javascript技巧_
- JavaScript前端实现小说分页功能示例_JavaScript_
- 微信小程序实现选择内容显示对应内容_javascript技巧_
- JS模板编译的实现详情_javascript技巧_
- JavaScript前端分页实现示例_JavaScript_
- 微信小程序实现简单的购物车功能_javascript技巧_
- JavaScript+HarmonyOS 实现一个手绘板_javascript技巧_
- Vue3解析markdown并实现代码高亮显示的详细步骤_vue.js_
- 微信小程序实现select二级下拉_javascript技巧_
- JavaScript详解使用Promise处理回调地狱与async await修饰符_javascript技巧_
