小程序菜单三级分类

Posted 2023-05-26 Rzk

页面显示效果

前端的美化功底还有得提高哈哈哈

前端代码

<view class=\'container\'>

  <!-- tab导航栏 -->
  <scroll-view scroll-x="true" class="nav" scroll-left="navScrollLeft" scroll-with-animation="true">
    <block wx:for="categoryMenuI" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">

      <view class="nav-item currentTab == idx ?\'active\':\'\'" data-value=\'navItem.value\' data-current="idx" bindtap="switchNav">
        <text>navItem.label</text>
      </view>
    </block>
  </scroll-view>
  <!-- 页面内容 -->
    <!-- 左边的  -->
    <scroll-view class=\'nav_left\' scroll-y=\'true\'>
      <block wx:for="categoryMenuILeft" wx:key="index">
        <view  hover-class="hover-color" class="nav_left_items leftCur==index?\'active\':\'\'" bindtap="switchLeftTab" data-value=\'item.value\' data-index=\'index\'>
          item.label</view>
      </block>
    </scroll-view>
    <!-- 右边的 -->
    <scroll-view class="nav_right" scroll-y="true">
      <view class="topx">
        <block wx:for="categoryMenuIRight" wx:key="index">
          <navigator url="/pages/classification/classification?categoryId=item.value&categoryName=item.label">
            <view class="nav_right_items" data-index=\'index\' data-value=\'item.value\' bindtap="switchRightTab">
              <image src="item.categoryImage"></image>
              <text>item.label</text>
            </view>
          </navigator>
        </block>
      </view>
    </scroll-view>
</view>

后端json数据

三级菜单小程序

字典嵌套+循环嵌套：

 

 1 # __author:"Cheng" 
 2 # date:2018/2/17
 3 
 4 menu_ex = {‘江苏省‘:{‘常州市‘:{‘武进区‘:{}},
 5                     ‘南京市‘:{‘玄武区‘:{}},
 6                     ‘盐城市‘:{‘大丰区‘:{}},
 7                   },
 8            ‘浙江省‘:{‘湖州市‘:{‘吴兴区‘:{}},
 9                     ‘杭州市‘:{‘余杭区‘:{}},
10                     ‘宁波市‘:{‘江北区‘:{}},
11                   },
12            ‘四川省‘:{‘成都市‘:{‘金牛区‘:{}},
13                     ‘自贡市‘:{‘大安区‘:{}},
14                     ‘绵阳市‘:{‘安州区‘:{}},
15                   }
16 }
17 
18 choose_layer = menu_ex      # 实现动态循环
19 parent_layers = []  # 保存所有父级为列表 ， 最后一个元素永远都是父亲级
20 while True:
21     for key in choose_layer:     # 循环输出字典本身
22         print(key)
23     usr_choice = input(‘请输入您的选择：‘).strip()
24     if len(usr_choice) == 0:continue    # 如果输入长度是0，那么跳过当次输出，重新循环
25     if usr_choice in choose_layer:
26         parent_layers.append(choose_layer)  # 在进入下一层之前，把当前层（也就是下一层的父级）追加到列表中，下一次loop，当用户选择r的时候就可以直接取列表的最后一个值出来
27         choose_layer = choose_layer[usr_choice]     # 改成了子层
28     elif usr_choice == ‘r‘:
29         if parent_layers:   # []
30             choose_layer = parent_layers.pop()  # 取出列表的最后一个值，因为它就是当前层的父级
31     else:
32         print(‘无此项!‘) 

三级菜单小程序