- 小程序
在微信小程序中实现自定义的 TabBar，并在中间添加一个圆形凸起的按钮，你可以参考以下代码示例来实现：
1. 首先，创建一个自定义的底部 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;
}
.circle-button {
position: absolute;
top: -40rpx;
left: calc(50% - 50rpx);
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
background-color: #f00;
display: flex;
justify-content: center;
align-items: center;
}
.circle-button-icon {
font-size: 48rpx;
color: #fff;
}2. 使用自定义的 TabBar 组件，并在页面的 json 文件中进行配置：
{
"usingComponents": {
"tab-bar": "/components/tabBar/tabBar"
}
}3. 在页面的 wxml 文件中使用自定义的 TabBar 组件
上一篇：微信小程序自定义底部tabBar
