需求
项目用uniapp开发，突然收到一个需求，实现底部tab栏突起的效果
实现
为了实现这样的效果，先查了官方文档，给出了两个方案
1、自定义实现tab栏展示
因为主要开发app，为了体验性还是决定用官方原生tab
2、按官方文档配置tabbar
在官方文档中，可以配置tab栏中间突起；
原文：中间带+号的tabbar模板例子，参考。可跨端，但+号不凸起。如需中间凸起，配置tabbar的midButton。
官方文档
但是有个问题，点击中间不是一个新的页面，还是触发点击事件，在app.vue 中监听。
我的想法是先写一个页面，然后在点击事件中做跳转
export default {
onLaunch: function() {
// 点击中间按钮
uni.onTabBarMidButtonTap(()=>{
uni.navigateTo({
url:'/pages/index/index'
})
})
}
}"pages": [
"path" : "pages/index/home",
"style" :
{
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false
}
}
{
"path" : "pages/index/index",
"style" :
{
"navigationBarTitleText": "uniapp",
"enablePullDownRefresh": false
}
}
],但是明显问题来了，我是切换tab页，不是跳转到新的页面，这样会存在明显的页面跳转动画还有返回。
那我把页面加到page.json的 tabbar中，但这样就会在底部多一个标签选项。
正在我百思不得其解的时候，我注意到tabbar有个属性，visible：是否显示
这样好办了，我把visible设为false，监听改为
uni.onTabBarMidButtonTap(()=>{
uni.switchTab({
url:'/pages/index/index'
})
})page.json tabbar设置
"tabBar": {
"borderStyle": "black",
"backgroundColor": "#fff",
"color": "#8F8F94",
"selectedColor": "#1EC2A0",
"list": [{
"pagePath": "pages/index/home",
"iconPath": "static/home.png",
"selectedIconPath": "static/homeSelected.png",
"text": "首页"
},
{
"pagePath": "pages/index/market",
"iconPath": "static/market.png",
"selectedIconPath": "static/market.png",
"text": "商城"
},
// #ifdef APP-PLUS
{
"pagePath": "pages/index/index",
"iconPath": "static/fabu.png",
"selectedIconPath": "static/fabu.png",
"text": "发布",
"visible": false
},
// #endif
// #ifndef APP-PLUS
{
"pagePath": "pages/index/index",
"iconPath": "static/fabu.png",
"selectedIconPath": "static/fabu.png",
"text": "发布"
},
// #endif
{
"pagePath": "pages/index/cart",
"iconPath": "static/shopCart.png",
"selectedIconPath": "static/shopCartSelect.png",
"text": "购物车"
},
{
"pagePath": "pages/index/mine",
"iconPath": "static/mine.png",
"selectedIconPath": "static/mineSelected.png",
"text": "我的"
}
],
"midButton": {
"iconPath": "static/fabu.png",
"iconWidth": "60px",
"height": "65px"
}
}这样就是实现了中间tab页面突起图标加跳转
