uniapp 导航分类

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

展示效果如下：

       

代码展示

①div部分

	<view class="container">
					<view class="menu-bar">
						<view class="menu">
							<view class="menu-scroll">
								<view v-for="(m, i) in menus" :key="m"
									:class="['menu-item', i === activeIndex && 'active']" @click="activeIndex = i">
									{{ m }}
								</view>
							</view>
							<view :class="['unfold', visible && 'up']" @click="visible = !visible"
								style="background-color: #F5F9FF;margin-top: 6rpx;">
								<u-icon name="arrow-down" size="15" style=""></u-icon>
							</view>
						</view>
						<view v-if="visible" :class="['all-menu', visible && 'active']">
							<view class="menu-item h3">全部分类</view>
							<view v-for="(m, i) in menus" :key="m" :class="['menu-item', i === activeIndex && 'active']"
								@click="activeIndex = i">
								{{ m }}
							</view>
						</view>
					</view>
					<view v-if="visible" class="modal" @click="visible = false" />
				</view>

②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%;
    }

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