在微信小程序中实现自定义 tabBar
可以为你的应用提供更加灵活和个性化的底部导航菜单。由于微信小程序的官方 tabBar
配置功能有限,自定义 tabBar
成为了很多开发者实现复杂底部导航的选择。以下是一个简单的示例,说明如何在小程序中实现自定义 tabBar
。
步骤 1: 配置 app.json
首先,你需要在 app.json
中配置 tabBar
的基础信息,但 custom
字段需要设置为 true
来启用自定义 tabBar
。
json
{
"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。
javascript
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
定义组件的配置信息。
json
{
"usingComponents": {}
}
index.wxml
定义 tabBar 的结构。
html
<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
添加样式。
css
.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 组件。
javascript
App({
onLaunch: function () {
// 在这里可以执行一些启动时的逻辑
},
usingComponents: {
'不同角色,控制查看底部菜单权限
实现效果1:实体店![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2ca6098eefaf4d55935d9eb8d44116fb.png)
实现效果2:回收公司
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/da1d7b225c064d3ab058176211f65833.png)