uniapp 实现tabBar图标凸起的两种方式（App端）

开发中客户可能会需求App端的tabBar中间的图标凸起，以实现更好的审美观。但如何实现呢？我这里推荐的两种方式，第一种是查阅相关例子按需配置隐藏于显示实现的，第二种是自己按官方文档配置midButton 自定义实现的。
uni-app版本更新到2.3.5后App平台 重构 tabBar，原生支持 midButton（中间凸起），支持高度调节（App、H5默认高度统一为50px），降低内存占用，避免iOS白屏。

github: https://github.com/Front97721/uniapp-tabBarRaised.git

先看效果吧！！嘿嘿！！



按需配置隐藏于显示

按平常一样配置pages.json

"tabBar": {"color": "#999999","selectedColor": "#FA4740","borderStyle": "black","backgroundColor": "#ffffff","list":[{"fontSize": "11px","pagePath": "pages/index/index","iconPath": "static/logo.png","selectedIconPath": "static/logo.png","text": "首页"},{"pagePath": "pages/classification/classification","iconPath": "static/logo.png","selectedIconPath": "static/logo.png","text": "分类"},{"pagePath": "pages/circle/circle","iconPath": "static/circle.png","selectedIconPath": "static/circle.png","text": "圈子"},{"pagePath": "pages/order/order","iconPath": "static/logo.png","selectedIconPath": "static/logo.png","text": "购物车"},{"pagePath": "pages/my/my","iconPath": "static/logo.png","selectedIconPath": "static/logo.png","text": "我的"}]}

加载图片（index.vue）

onLoad() {    bitmap = new plus.nativeObj.Bitmap('bmp1');  //新增原生图片    //bitmap.load('static/circle.png', function() {}, function(e) {});  //普通写法    //兼容ios端    bitmap.loadBase64Data('base64图片地址', function() {}, function(e) {});    this.createtab();}

这为了兼容IOS端，需要用base64图片地址（转换工具），我尝试了一下用GIF动态图也OK的,就是转base64时编码好多，卡卡的，不过可以用普通写法（非IOS端）。

设置凸起按钮样式位置（index.vue）

methods: {createtab: function(){// 设置水平居中位置var leftPos = Math.ceil((plus.screen.resolutionWidth - 50) / 2);var view = new plus.nativeObj.View('icon', {bottom: '19px',left: leftPos + 'px',width: '50px',height: '50px'});//使用canvas画布把图标画到tabbar对应位置上view.drawBitmap(bitmap, {tag: 'font',id: 'icon',src: '/static/app-tabber/app-tabber.png',position: {top: '0px',left: '5px',width: '50px',height: '100%'}});//监听界面跳转view.addEventListener("click", function(e) {uni.switchTab({url: '/pages/circle/circle'})}, false);view.show();}}

显示凸起图标（index.vue）

onShow() { //显示突起图标var icon = plus.nativeObj.View.getViewById("icon");  //根据图标id取到图片if (icon) {setTimeout(function(){icon.show();},50)}},

二级页面隐藏tabBar
方式一：

() {    /* 隐藏tabBar图标 */    var icon = plus.nativeObj.View.getViewById("icon");    setTimeout(function() { icon.hide();    }, 100);}

方式二：
以前遇到，好像page.json中配置，忘了！持续更新------

配置midButton

参照 官方文档

midButton就是中间按钮，有的文档说仅在 list 项为偶数时有效，其实不然。

配置midButton及路由（page.json）

//tabBar下配置midButton，设置图标的大小并编译到App端// #ifdef APP-PLUS"midButton": {  "pagePath": "pages/circle/circle",  "iconPath": "static/circle.png",  "width": "60px",  "height": "65px",  "iconWidth": "40px",  "text": "圈子"},// #endif

//配置凸起图标路由及编译到App端// #ifndef APP-PLUS{"pagePath": "pages/circle/circle","fontSize":"11px","iconPath": "static/circle.png","selectedIconPath": "static/circle.png","text": "圈子"},// #endif

配置二级界面的跳转及隐藏tabBar(App.vue)

uni.onTabBarMidButtonTap(function() { uni.navigateTo({ url: '/pages/circle/circle' }) })

总结：

• 按需配置隐藏于显示，主要是在首页配置对应的图标加载、tabbar图标凸起及显示，子页面配置对应的tabbar隐藏。不好的地方就是每个子页面都要配置对应的tabbar隐藏。
• 配置midButton，主要是page.json配置midButton中间件、相关路由和图标凸起及相关编译平台。App.vue配置凸起图标的二级跳转。
• 都说uniapp是万能的—所有的东西都不是万能，所以相信以后会慢慢实现更多的。