微信小程序是支持自定义导航栏的,可查看微信小程序官方文档,学习自定义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