- 小程序
在微信小程序中自定义底部 TabBar，你需要以下几个步骤：
1. 首先，需要在 app.json 或者 project.config.json 中配置 custom 字段，告诉小程序不使用原生的 tabBar，而是自定义的 tabBar。
{
"custom": true
}2. 创建自定义的底部 TabBar 组件：
图标 首页 图标 分类 图标 购物车 图标 我的
/* components/tabBar/tabBar.wxss */
.tab-bar {
display: flex;
justify-content: space-around;
align-items: center;
height: 100rpx;
background-color: #fff;
box-shadow: 0 0 10rpx 0rpx #e5e5e5;
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
}
.tab-icon {
font-size: 36rpx;
color: #666;
}
.tab-text {
font-size: 24rpx;
color: #666;
}3. 在页面中引入自定义的底部 TabBar 组件，在页面的 json 文件中进行配置
{
"usingComponents": {
"tab-bar": "/components/tabBar/tabBar"
}
}4. 最后在页面的 wxml 文件中使用自定义的 TabBar 组件
