uniapp 导航分类

1. 商品分类数据，包括分类名称和对应的商品列表
2. 点击弹出 列表的内容

展示效果如下：

       

代码展示

①div部分

	
					
						
							
								
									{{ m }}
								
							
							
								
							
						
						
							全部分类
							
								{{ m }}
							
						
					
					
				

②js部分

	menus: ["首页", "手机", "爱车", "百货", "男装", "饰品", "美妆", "电脑", "钟表眼镜"],
				activeIndex: 0,
				visible: false,

③css部分

    ::-webkit-scrollbar {
        display: none;
    }

    .container {
        position: relative;
        z-index: 100;
        width: 375px;
        // height: 812px;
        background-color: #f1f1f1;
    }

    .menu-bar {
        position: relative;
        z-index: 10;
    }

    .menu {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 16px 12px 12px 10px;
        background-color: #F5F9FF;
        box-sizing: border-box;
    }

    .menu .menu-scroll {
        display: flex;
        width: 100%;
        overflow-x: scroll;
    }


    .menu-item {
        padding: 0 7px;
        flex-shrink: 0;
        font-size: 14px;
    }

    .menu-item.active {
        color: #478CF6;
        font-weight: 700;
    }

    .all-menu {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px 4px;
        padding: 16px 8px 20px 24px;
        background-color: #fff;
        border-radius: 0 0 16px 16px;
        transition: all 0.3s;
    }

    .all-menu.active {
        padding: 16px 8px 20px;
        height: auto;
    }

    .all-menu .menu-item {
        background-color: #f5f5f5;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border-radius: 20px;
        box-sizing: border-box;
        border: 1px solid #f5f5f5;
    }

    .all-menu .menu-item.h3 {
        background: none;
        border-color: #fff;
    }

    .all-menu .menu-item.active {
        background-color: #fff;
        border-color: #478CF6;
    }

    .modal {
        position: absolute;
        top: 0;
        left: 0;
        // background-color: rgba(0, 0, 0, 0.3);
        width: 100%;
        height: 100%;
    }

以上为所有，即可粘贴进行测试。