程序员小洛Appearance
底部导航凸起按钮
注意：midButton目前只支持App和H5端，暂不支持小程序
效果图：
也就是说除了midButton，tabbar的list必须是偶数才生效
midButton的属性
由于midButton原生的跳转，只能借助事件来操作
midButton按钮的配置
pages.json文件
json
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/ic_home_ct.png",
"selectedIconPath": "static/ic_home_dj.png",
"text": "首页"
},
{
"pagePath": "pages/cate/cate",
"iconPath": "static/ic_cym_ct.png",
"selectedIconPath": "static/ic_cym_dj.png",
"text": "分类"
},
{
"pagePath": "pages/cart/cart",
"iconPath": "static/ic_buy_ct.png",
"selectedIconPath": "static/ic_buy_dj.png",
"text": "购物车"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/ic_settle_ct.png",
"selectedIconPath": "static/ic_settle_dj.png",
"text": "我的"
}
],
"midButton": {
"iconPath": "/static/add.png",
"iconWidth": "60px",
"width": "60px",
"height": "60px",
"text": "文字也不要"
}
},"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/ic_home_ct.png",
"selectedIconPath": "static/ic_home_dj.png",
"text": "首页"
},
{
"pagePath": "pages/cate/cate",
"iconPath": "static/ic_cym_ct.png",
"selectedIconPath": "static/ic_cym_dj.png",
"text": "分类"
},
{
"pagePath": "pages/cart/cart",
"iconPath": "static/ic_buy_ct.png",
"selectedIconPath": "static/ic_buy_dj.png",
"text": "购物车"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/ic_settle_ct.png",
"selectedIconPath": "static/ic_settle_dj.png",
"text": "我的"
}
],
"midButton": {
"iconPath": "/static/add.png",
"iconWidth": "60px",
"width": "60px",
"height": "60px",
"text": "文字也不要"
}
},App.vue文件
vue
<script>
export default {
onLaunch: function() {
console.log('App Launch')
uni.onTabBarMidButtonTap(()=>{
uni.navigateTo({
url:'/pages/order/order'
})
})
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style><script>
export default {
onLaunch: function() {
console.log('App Launch')
uni.onTabBarMidButtonTap(()=>{
uni.navigateTo({
url:'/pages/order/order'
})
})
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>