vant树型菜单多级_mui 侧栏菜单实现多级树数据列表,返回上一级树

本文介绍如何在移动端使用 vant 树型菜单实现多级导航,通过监听点击事件,利用栈结构存储树的历史,以侧栏菜单的形式展示。当用户点击节点时,显示对应的子树,并将子树添加到历史记录。当历史记录超过一级时,显示返回上一级的按钮。同时提供渲染树结构列表和叶子节点的函数。
摘要由CSDN通过智能技术生成

想在移动端使用树结构选择项目,但是在移动端显示体验太差怎么办?使用栈结构存储树历史,使用类似侧栏菜单的方式实现:var currtTreeArr = []; //当前树列表数组

var treeData = []; //根节点数据

var treeHistoryArr = []; //历史打开的树,用于回退,进入到其他节点

$(".mui-table-view").on("click", ".mui-navigate-right", function () { //列表冒泡监听点击

var idx = $(this).attr("index");

if (currtTreeArr[idx].children.length) {

//把点击项的子树显示出来,并添加当前点击的子树到历史

currtTreeArr = currtTreeArr[idx].children;

treeHistoryArr.push(currtTreeArr);

renderTree(currtTreeArr);

} else {

renderLeafNode(currtTreeArr[idx].id); //叶子节点

}

});

//渲染树结构列表

function renderTree(data) {

if (treeHistoryArr.length > 1) {

$("#goback").show(); //显示返回上一级按钮

} else {

$("#goback"

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值