微信小程序是支持自定义导航栏的，可查看微信小程序官方文档，学习自定义tabBar的使用

1.创建自定义导航栏 目录和文件

注意:

新建Component名字为 “ index”与pages同级

index.js文件

// custom-tab-bar/index.jsComponent({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {selected: 0,color: "#999999",selectedColor: "#EE3D42",listTab: [{pagePath: "/pages/index/index",text: "导航一",iconPath: "/static/guide_no.png",selectedIconPath: "/static/guide_active.png"},{pagePath: "/pages/calculate/calculate",text: "导航二",iconPath: "/static/calculate_no.png",selectedIconPath: "/static/calculate_active.png"},{pagePath: "/pages/personal/personal",text: "个人中心",iconPath: "/static/personal_no.png",selectedIconPath: "/static/personal_active.png"}]},/*** 组件的方法列表*/methods: {switchTab(e) {const data = e.currentTarget.dataset;const url = data.path;wx.switchTab({ url });//this.setData({// selected: data.index//})}}})

index.json

{"component": true}

index.wxml

<!--custom-tab-bar/index.wxml--><cover-view class="tab-bar"><cover-view class="tab-bar-border"></cover-view><cover-view wx:for="{{listTab}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image><cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view></cover-view></cover-view>

index.wxss

/* custom-tab-bar/index.wxss */.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform: scaleY(0.5);}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;}.tab-bar-item cover-image {width: 27px;height: 27px;margin: 10rpx 0;}.tab-bar-item cover-view {font-size: 12px;}

2.在app.json里添加,并配置 tabBarcustom:true

"tabBar": {"custom": true,"color": "#999999","selectedColor": "#EE3D42","list": [{"pagePath": "pages/index/index","text": "导航一","iconPath": "static/guide_no.png","selectedIconPath": "static/guide_active.png"},{"pagePath": "pages/calculate/calculate","text": "导航二","iconPath": "static/calculate_no.png","selectedIconPath": "static/calculate_active.png"},{"pagePath": "pages/personal/personal","text": "个人中心","iconPath": "static/personal_no.png","selectedIconPath": "static/personal_active.png"}]},

注意:

点击导航栏时跳转不灵敏.可能会跳转两次

解决方案:

在添加的导航页面的 onShow函数里增加以下代码

if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({selected: 2 //0,1，2 0-导航一 1-导航二 2-个人中心})}

底部导航栏隐藏或显示

1.自定义导航栏时

tabBar配置: custom:true

custom-tab-bar下的index.wxml

<!--custom-tab-bar/index.wxml--><cover-view class="tab-bar" wx:if="{{showBar}}"><cover-view class="tab-bar-border"></cover-view><cover-view wx:for="{{listTab}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image><cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view></cover-view></cover-view>

custom-tab-bar下的index.js增加定义

showBar:true

在需要隐藏导航栏的页面调用 -- 隐藏 tabbar

this.getTabBar().setData({showBar: false});

在需要隐藏导航栏的页面调用 -- 显示tabbar

this.getTabBar().setData({showBar: true});

2.配置导航栏时

隐藏tabbar点击查看详细

wx.hideTabBar();

wx.hideTabBar(Object object)

基础库 1.9.0 开始支持，低版本需做兼容处理。

隐藏 tabBar

参数

Object object

显示tabbar 点击查看详细

wx.showTabBar();

wx.showTabBar(Object object)

基础库 1.9.0 开始支持，低版本需做兼容处理。

显示 tabBar

参数

Object object