uin-app微信小程序自定义tabBar底部菜单实现简单示例（工作笔记）

在微信小程序中实现自定义 tabBar 可以为你的应用提供更加灵活和个性化的底部导航菜单。由于微信小程序的官方 tabBar 配置功能有限，自定义 tabBar 成为了很多开发者实现复杂底部导航的选择。以下是一个简单的示例，说明如何在小程序中实现自定义 tabBar。

步骤 1: 配置 app.json

首先，你需要在 app.json 中配置 tabBar 的基础信息，但 custom 字段需要设置为 true 来启用自定义 tabBar。

{"pages": ["pages/index/index","pages/logs/logs","pages/profile/profile"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/logs/logs","text": "日志"},{"pagePath": "pages/profile/profile","text": "我的"}],"custom": true,"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black"}
}

步骤 2: 创建自定义 tabBar 组件

在项目的根目录下创建一个名为 custom-tab-bar 的文件夹，并在其中创建所需的文件（如 index.js、index.json、index.wxml、index.wxss）。

index.js

这里可以处理逻辑，比如根据当前页面切换 tab。

Component({data: {selected: 0,list: [{pagePath: '/pages/index/index',text: '首页'}, {pagePath: '/pages/logs/logs',text: '日志'}, {pagePath: '/pages/profile/profile',text: '我的'}]},methods: {switchTab: function(e) {const data = e.currentTarget.dataset;if (this.data.selected === data.index) return;wx.switchTab({url: data.path});},onShow: function(e) {// 当 tabBar 显示时触发，可以根据需要获取当前页面路径const { path } = getCurrentPages().pop();this.setData({selected: this.data.list.findIndex(tab => tab.pagePath === path)});}}
});

index.json

定义组件的配置信息。

{"usingComponents": {}
}

index.wxml

定义 tabBar 的结构。

<view class="tab-bar"><block wx:for="{{list}}" wx:key="index" wx:for-index="idx"><view class="tab-item {{selected === idx ? 'active' : ''}}" data-path="{{item.pagePath}}" data-index="{{idx}}" bindtap="switchTab">{{item.text}}</view></block>
</view>

index.wxss

添加样式。

.tab-bar {display: flex;justify-content: space-around;background-color: #fff;position: fixed;bottom: 0;left: 0;right: 0;height: 50px;
}.tab-item {padding: 10px 0;text-align: center;
}.tab-item.active {color: #3cc51f;
}

步骤 3: 在 app.js 中使用自定义 tabBar

在 app.js 中引入并使用自定义的 tabBar 组件。

App({onLaunch: function () {// 在这里可以执行一些启动时的逻辑},usingComponents: {'不同角色，控制查看底部菜单权限实现效果1：实体店![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2ca6098eefaf4d55935d9eb8d44116fb.png)
实现效果2：回收公司
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/da1d7b225c064d3ab058176211f65833.png)