三级菜单小程序

这个代码示例展示了如何创建一个可回退、可随时退出并能返回的三级菜单。用户可以通过输入指令在不同层级的菜单间切换,如'北京'->'海淀'->'五道口'等,支持通过'b'键返回上一级菜单,输入'q'或'quit'退出程序。该程序适用于导航复杂结构的数据菜单。

实现一个三级菜单,可回退,可随时退出,可返回

menu = {
    '北京':{
        '海淀':{
            '五道口':{
                'soho':{},
                '网易':{},
                'google':{}
            },
            '中关村':{
                '爱奇艺':{},
                '汽车之家':{},
                'youku':{},
            },
            '上地':{
                '百度':{},
            },
        },
        '昌平':{
            '沙河':{
                '老男孩':{},
                '北航':{},
            },
            '天通苑':{},
            '回龙观':{},
        },
        '朝阳':{},
        '东城':{},
    },
    '上海':{
        '闵行':{
            "人民广场":{
                '炸鸡店':{}
            }
        },
        '闸北':{
            '火车战':{
                '携程':{}
            }
        },
        '浦东':{},
    },
    '山东':{},
}

current = menu
gyf=[menu]
while True:
    for i in current.keys():
        print(i)
    a = input('>').strip()
    if a == 'b':
        current=gyf[-1]  # current最后一位都是保留上一级菜单
        if len(gyf) > 1: # 防止在一级菜单退出多次时报错
            gyf.pop()    # 拿到上级菜单后要把最后一位删除,此时最后一位就是上上级菜单
    elif a in ('q','quit'):
        break
    elif a not in current:
        continue
    else:
        gyf.append(current) #每次把当前的菜单都放到最后一位
        current=current[a]  #把下级菜单放到current,这样打印出来就是下级菜单

提供的参考引用中未包含vx小程序三级菜单开发与实现的相关内容,以下从通用角度说明其开发与实现。 ### 开发方法 - **数据结构设计**:设计合理的数据结构来存储菜单信息,通常使用嵌套数组或对象来表示三级菜单的层级关系。例如: ```javascript const menuData = [ { id: 1, name: '一级菜单1', children: [ { id: 11, name: '二级菜单1-1', children: [ { id: 111, name: '三级菜单1-1-1' }, { id: 112, name: '三级菜单1-1-2' } ] }, { id: 12, name: '二级菜单1-2', children: [ { id: 121, name: '三级菜单1-2-1' }, { id: 122, name: '三级菜单1-2-2' } ] } ] }, { id: 2, name: '一级菜单2', children: [ { id: 21, name: '二级菜单2-1', children: [ { id: 211, name: '三级菜单2-1-1' }, { id: 212, name: '三级菜单2-1-2' } ] } ] } ]; ``` - **页面布局**:使用微信小程序的视图层框架(WXML 和 WXSS)来创建菜单的界面布局。可以使用 `<view>` 标签来构建菜单的各个层级,并通过样式控制菜单的显示效果。例如: ```xml <!-- WXML --> <view class="menu"> <view wx:for="{{menuData}}" wx:key="id" bindtap="toggleFirstLevel" data-index="{{index}}"> {{item.name}} <view wx:if="{{item.showChildren}}" class="second-level"> <view wx:for="{{item.children}}" wx:key="id" bindtap="toggleSecondLevel" data-index="{{index}}"> {{item.name}} <view wx:if="{{item.showChildren}}" class="third-level"> <view wx:for="{{item.children}}" wx:key="id"> {{item.name}} </view> </view> </view> </view> </view> </view> ``` ```css /* WXSS */ .menu { padding: 10px; } .second-level { padding-left: 20px; } .third-level { padding-left: 40px; } ``` - **事件处理**:在逻辑层(JavaScript)中处理菜单的展开和收起事件。通过绑定 `bindtap` 事件,在点击菜单时更新数据的显示状态。例如: ```javascript // JavaScript Page({ data: { menuData: menuData }, toggleFirstLevel: function (e) { const index = e.currentTarget.dataset.index; const menuData = this.data.menuData; menuData[index].showChildren = !menuData[index].showChildren; this.setData({ menuData: menuData }); }, toggleSecondLevel: function (e) { const firstIndex = e.currentTarget.dataset.firstIndex; const secondIndex = e.currentTarget.dataset.index; const menuData = this.data.menuData; menuData[firstIndex].children[secondIndex].showChildren = !menuData[firstIndex].children[secondIndex].showChildren; this.setData({ menuData: menuData }); } }); ``` ### 实现案例 - **电商小程序**:在电商类微信小程序中,三级菜单可用于商品分类导航。一级菜单为商品的大分类,如服装、数码、家居等;二级菜单为大分类下的子分类,如服装下的上衣、裤子、裙子等;三级菜单为子分类下的具体品类,如上衣下的 T 恤、衬衫、卫衣等。用户可以通过点击各级菜单,快速定位到自己想要的商品类别。 - **资讯类小程序**:资讯类小程序可利用三级菜单进行文章分类。一级菜单为资讯的大主题,如科技、娱乐、体育等;二级菜单为大主题下的细分领域,如科技下的互联网、人工智能、通信等;三级菜单为细分领域下的具体话题,如互联网下的电商动态、社交平台热点等。用户可以根据自己的兴趣,通过三级菜单筛选浏览相关的资讯文章。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郑*杰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值