uniapp分类菜单
uniapp分类菜单实现方法
横向滚动分类菜单
使用scroll-view组件实现横向滚动效果，结合flex布局展示分类项。示例代码：
<scroll-view scroll-x class="category-scroll">
<view class="category-item" v-for="(item, index) in categories" :key="index">
{{item.name}}
</view>
</scroll-view>.category-scroll {
white-space: nowrap;
width: 100%;
}
.category-item {
display: inline-block;
padding: 10px 15px;
margin-right: 10px;
background-color: #f5f5f5;
border-radius: 15px;
}左侧分类+右侧内容布局
采用flex布局分为左右两部分，左侧固定宽度显示分类，右侧展示对应内容：
<view class="container">
<scroll-view scroll-y class="left-menu">
<view v-for="(item,index) in menuList" :key="index"
@click="changeMenu(index)"
:class="['menu-item', activeIndex===index?'active':'']">
{{item.name}}
</view>
</scroll-view>
<scroll-view scroll-y class="right-content">
<!-- 动态内容 -->
</scroll-view>
</view>.container {
display: flex;
height: 100vh;
}
.left-menu {
width: 25%;
background: #f8f8f8;
}
.right-content {
width: 75%;
}
.menu-item {
padding: 15px;
text-align: center;
}
.active {
color: #ff0000;
background: #fff;
}多级分类菜单
实现嵌套式多级分类结构，使用递归组件或多层v-for：
<view class="multi-level">
<view v-for="(item,index) in categories" :key="index" class="level1">
<view @click="toggleSub(index)" class="level1-title">
{{item.name}}
<uni-icons :type="item.expand?'arrowup':'arrowdown'"></uni-icons>
</view>
<view v-show="item.expand" class="level2">
<view v-for="(sub,subIndex) in item.children" :key="subIndex" class="level2-item">
{{sub.name}}
</view>
</view>
</view>
</view>动态数据绑定
在script部分定义分类数据和处理方法：
export default {
data() {
return {
activeIndex: 0,
categories: [
{name: '全部', id: 0},
{name: '食品', id: 1},
{name: '电子产品', id: 2}
],
menuList: [
{name: '分类1', children: [...]},
{name: '分类2', children: [...]}
]
}
},
methods: {
changeMenu(index) {
this.activeIndex = index
// 加载对应内容
},
toggleSub(index) {
this.$set(this.menuList[index], 'expand', !this.menuList[index].expand)
}
}
}性能优化建议
分类数据较多时使用虚拟列表技术，通过uni-app的组件或第三方组件如mescroll-uni实现懒加载
添加分类图标增强视觉效果，使用uni-icons组件或自定义图片：
<view class="category-with-icon">
<uni-icons type="home" size="20"></uni-icons>
<text>首页</text>
</view>
