更新记录

1.0.1（2025-01-14） 下载此版本

1.0.1

1.0.0（2025-01-14） 下载此版本

1.0.0

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

custom-tabbar

如何使用 uniapp 开发微信小程序自定义底部导航栏呢？

在我们实际的开发过程中我们总会碰到各种各样的需求，比如：小程序中根据用户角色的不同展示不同的底部导航栏 需要在中间凸起展示，然而查看uni-app的tabBar文档可知，小程序是不支持midButton的；所以只能自定义底部导航栏 解决思路：隐藏uni-app原有的tabBar，然后换成自己手写的导航栏，进行定位和自定义样式

然后在引入自己的组件 在需要的page页面直接引入，共5个按钮，中间为凸起展示

    <custom-tabbar :current-page="1"></custom-tabbar>
    <custom-tabbar :current-page="2"></custom-tabbar>
    <custom-tabbar :current-page="3"></custom-tabbar>
    <custom-tabbar :current-page="4"></custom-tabbar>

custom-tabbar.vue文件

<style lang="scss" scope> view { padding: 0; margin: 0; box-sizing: border-box; } .tabbar-container { position: fixed; bottom: 0rpx; left: 0rpx; width: 100%; height: 140rpx; display: flex; align-items: center; justify-content: space-between; // 使得左右的 tab 项距离均匀 color: #999999; background-color: #fff; padding-bottom:calc(env(safe-area-inset-bottom) - 35rpx); /* 添加底部安全区域 padding */ /* 针对tabbar的统一处理 */ .tabbar-item { width: 33.33%; height: 100rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; .item-top { width: 60rpx; height: 60rpx; image { width: 100%; height: 100%; } } /* 未被选中的导航栏字体 */ .item-bottom { font-size: 22rpx; width: 100%; color: #999999; } /* 被选中的导航栏字体 */ .item-active { color: #4A9CE7; } } /* 最中间的tabbar导航栏 */ .center-item { display: block; position: relative; .item-top { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 112rpx; height: 112rpx; position: absolute; top: -30rpx; left: calc(50% - 50rpx); // 居中对齐 border-radius: 50%; background-color: #4A9CE7; box-shadow: 0px 3px 6px rgba(74,156,231,0.5); } .item-bottom { position: absolute; bottom: 5rpx; } .item-active { position: absolute; bottom: 5rpx; color: #1fff; } } } </style>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...