开发中客户可能会需求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是万能的—所有的东西都不是万能,所以相信以后会慢慢实现更多的。