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

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