微信小程序自定义 tabBar

基础库 2.5.0 开始支持，低版本需做兼容处理。
微信小程序基础库 2.5.0 开始微信官方开放自定义底部 tabBar 组件 。主要是为了让开发者可以更加灵活地设置 tabBar 样式，以满足更多个性化的场景。但是在实际开发者使用微信官方提供的组件 , 适配和兼容并不感人 , 让人从满怀希望到绝望 ;

先简单介绍一下微信官方提供的自定义tabBar 的用法

在 app.json 中的 tabBar 项指定 custom (布尔值)字段，在所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。在根目录下创建custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-bar/index.wxss具体页面代码不在书写 , 可在 tabBar 组件底部示例代码中点击 在开发者工具中预览效果 在编辑器中拷贝相关代码即可;

实际使用中出现问题?
在使用官方提供的自定义tabBar 组件中 , 点击切换tabBar时 , 点击切换选中的状态一直是上一次(上一个tabBar)点击的tabBar , 并且首次点击切换到其他tabBar页是会有闪烁现象 ; 在微信社区和博客中尝试很多方法 , 都没有能解决问题 , 最后不得放弃使用 , 自己从新自定义一个tabBar组件 ;

自助自定义tabBar组件实现

1.在app.js中 onLaunch 中 调用 wx.hideTabBar() 方法隐藏tab , 或者在第2步新建的 custom-tab-bar目录中index.js生命周期attached中调用 wx.hideTabBar() 方法隐藏tab; 注意基础库 1.9.0开始支持 , 全局变量globalData 中增加 selectedIndex:0 ;
2. 新建components目录 , 在components目录中创建 custom-tab-bar目录 custom-tab-bar目录中分别新建index.wxml , index.js ,index.json , index.wxss页面 ; 注意要在index.json 设置 component": true;
3. 在tabBar页面中引用组件 .json页中设置 "usingComponents": { "custom-tab-bar": "/components/custom-tab-bar/index" }
4. .wxml页面中使用 tabBar组件<custom-tab-bar></custom-tab-bar>

custom-tab-bar 代码页一起奉上

index.wxml页面

<cover-view class="tab-bar" style="background:{{items.style.background}}"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{items.data}}" wx:key="*this" class="tab-bar-item" data-path="{{item.linkUrl}}" data-index="{{index}}" bindtap="switchTab" wx:for-index="index"> <cover-image src="{{selected === index ? item.select_imgUrl : item.default_imgUrl}}"></cover-image> <cover-view style="color: {{selected === index ? item.select_color : item.color}}">{{item.text}}</cover-view> </cover-view> </cover-view> 

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; } .tab-bar-item cover-view {   font-size: 10px; } 

index.js页面

const App = getApp(); Component({   lifetimes: {     attached: function () {       wx.hideTabBar(); this.getTab(); },     ready: function () { this.setData({         selected: App.globalData.selectedIndex       }); } },      data: {     selected: 0, // 当前 tabBar 索引      color: "#6e6d6b",     selectedColor: "#fd4a5f",     borderStyle: "black",     backgroundColor: "#ffffff",     items: [], //.wxml items 渲染数据 //tabBar list示例     list: [ { "pagePath": "/pages/index/index", "text": "首页", "iconPath": "/images/icon/icon-27.png", "selectedIconPath": "/images/icon/icon-27-active.png" }, { "pagePath": "/pages/category/index", "text": "分类", "iconPath": "/images/icon/icon-20.png", "selectedIconPath": "/images/icon/icon-20-active.png" }, { "pagePath": "/pages/flow/index", "text": "购物车", "iconPath": "/images/icon/icon-22.png", "selectedIconPath": "/images/icon/icon-22-active.png" }, { "pagePath": "/pages/user/index", "text": "我的", "iconPath": "/images/icon/icon-26.png", "selectedIconPath": "/images/icon/icon-26-active.png" } ] },   methods: { /**      * tabBar切换      */ switchTab(e) { const data = e.currentTarget.dataset; const url = data.path;       App.navigationTo(url);       App.globalData.selectedIndex = data.index; }, /**      * 后台接口获取tabBar数据      */ getTab(){ let _this = this;       App._get('page/nav', {}, function(res) { const items = res.data.items;         _this.setData({items}) }); } } }) 

index.json页面

{ "component": true } 

好用 , 方便点下 , 不迷路 ! ! !