uniapp分类菜单
实现UniApp分类菜单的方法
使用uni-ui的uni-list组件 在UniApp中可以通过uni-ui提供的组件快速实现分类菜单效果。安装uni-ui后，在pages.json中引入组件：
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}页面模板中使用：
<uni-list>
<uni-list-item title="食品分类" showArrow />
<uni-list-item title="电子产品" showArrow />
<uni-list-item title="服装配饰" showArrow>
<template v-slot:footer>
<uni-tag text="热销" type="error" />
</template>
</uni-list-item>
</uni-list>自定义侧边栏分类 通过flex布局实现左右分栏的经典分类菜单：
<view class="menu-container">
<scroll-view scroll-y class="left-menu">
<view
v-for="(item,index) in categories"
:key="index"
:class="['menu-item', activeIndex===index?'active':'']"
@click="changeCategory(index)">
{{item.name}}
</view>
</scroll-view>
<scroll-view scroll-y class="right-content">
<view v-for="sub in subCategories" :key="sub.id">
<text class="sub-title">{{sub.name}}</text>
<view class="goods-list">
<!-- 商品项循环 -->
</view>
</view>
</scroll-view>
</view>对应CSS样式：
.menu-container {
display: flex;
height: 100vh;
}
.left-menu {
width: 25%;
background: #f8f8f8;
}
.menu-item {
padding: 20rpx;
text-align: center;
&.active {
color: #ff5500;
background: #fff;
border-left: 4rpx solid #ff5500;
}
}
.right-content {
width: 75%;
padding: 20rpx;
}数据绑定处理 在script部分处理分类数据交互：
export default {
data() {
return {
categories: [
{id:1, name:'生鲜食品'},
{id:2, name:'数码家电'},
{id:3, name:'美妆个护'}
],
activeIndex: 0,
subCategories: []
}
},
methods: {
changeCategory(index) {
this.activeIndex = index
// 模拟获取子分类
this.subCategories = this.getSubCategories(this.categories[index].id)
},
getSubCategories(parentId) {
// 实际项目中应调用接口获取数据
const mockData = {
1: [
{id:11, name:'新鲜水果'},
{id:12, name:'海鲜水产'}
],
2: [
{id:21, name:'手机通讯'},
{id:22, name:'电脑配件'}
]
}
return mockData[parentId] || []
}
}
}添加交互效果 增强用户体验的交互方案：
// 在onLoad中初始化数据
onLoad() {
this.changeCategory(0)
// 或者调用接口获取分类数据
uni.request({
url: 'https://api.example.com/categories',
success: (res) => {
this.categories = res.data
}
})
}优化性能的方案 对于大量分类数据的情况：
// 使用计算属性避免重复计算
computed: {
currentSubCategories() {
return this.getSubCategories(this.categories[this.activeIndex]?.id)
}
}注意事项
- 滚动区域需要设置固定高度
- 小程序端scroll-view组件必须指定高度
- 分类数据量大时可考虑分页加载
- H5端注意处理滚动穿透问题
以上方案可根据实际项目需求进行组合或调整，uni-ui提供了丰富的组件可以快速构建分类界面，而自定义方案则具有更高的灵活性。
