uniapp implements raised icons in the middle of the navigation bar

1. Use the attribute midButton officially provided by uniapp

When used, the list array must be an even number

pages.json

"tabBar": {
"color": "#000",
"selectedColor": "red",
"list": [{
"text": "Home",
"pagePath": "pages/index/index",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png"
},
{
"text": "mall",
"pagePath": "pages/a/a",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png"
},
// {
// "text": "Member",
// "pagePath": "pages/b/b",
// "iconPath": "static/logo.png",
// "selectedIconPath": "static/logo.png"
// },
{
"text": "task",
"pagePath": "pages/c/c",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png"
},
{
"text": "my",
"pagePath": "pages/d/d",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png"
}


],
"midButton": {
"pagePath": "pages/b/b",
"iconPath": "static/logo.png",
"width": "60px",
"height": "60px",
"iconWidth": "40px",
"iconheight": "40px",
"text": "Member"
}
},

App.vue

<script>
export default {
\t\t
\t
onLaunch: function() {
console.log('App Launch')
\t\t\t
             //Listen to the raised page
uni.onTabBarMidButtonTap(()=>{
uni.navigateTo({
url:'/pages/b/b'
})
})
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>

<style>
/*Public css for each page */
</style>

2. Custom tabBar component

Delete all tabbars in pages.json

Create a new component tabBar.vue

tabBar.vue

<template>
<view class="tab-block">
<ul
class='tab-list flex flex-center'
:class="showMiddleButton === true?'tab-list-middle':'tab-list-default'"
>
<li
v-for="(item, index) in tabList"
:class="'list-item flex flex-column flex-middle ' + item.middleClass"
@click="handlePush(item, index)"
:key="index"
>
<view class="item-img-box">
<image
class="item-img"
:src="tabIndex == index ? item.selectedIconPath : item.iconPath"
/>
</view>
<view class="item-text font-20 color-black">
{<!-- -->{item.text}}
</view>
\t\t\t</li>
\t\t</ul>
<view class="tab-bar" v-show="showTabBar === true"></view>
</view>
</template>

<script>
export default {
props: {
tabIndex: { //Currently selected tab item
type: Number,
default: 0
}
},
data() {
return {
/*
* iconPath: default icon image path
* selectedIconPath: selected icon image path
* text: tab button text
* pagePath: page path
* middleClass: middle button style class name
* tabList has a minimum of two items and a maximum of five items
* When the length of the tabList is an odd number, the middle button will be highlighted.
*
*/
tabList: [{
iconPath: '../../static/logo.png',
selectedIconPath: '../../static/logo.png',
text: 'Home',
pagePath: '/pages/index/index',
middleClass: ''
},
{
iconPath: '../../static/logo.png',
selectedIconPath: '../../static/logo.png',
text: 'mall',
pagePath: '/pages/a/a',
middleClass: ''
},
{
iconPath: '../../static/logo.png',
selectedIconPath: '../../static/logo.png',
text: 'Member',
pagePath: '/pages/b/b',
middleClass: ''
},
{
iconPath: '../../static/logo.png',
selectedIconPath:'../../static/logo.png',
text: 'Task',
pagePath: '/pages/c/c'
},
{
iconPath: '../../static/logo.png',
selectedIconPath: '../../static/logo.png',
text: 'My',
pagePath: '/pages/d/d',
middleClass: ''
}
],
showTabBar: false,
showMiddleButton: false,
};
},
computed: {
getHeight() {
return Number(this.height);
},
},
mounted() {
this.getSystemInfo()
this.setTabBar()
},
methods: {
//Determine whether the middle button is highlighted
setTabBar(){
let tabLength = this.tabList.length
if (tabLength % 2) {
this.showMiddleButton = true
let middleIndex = Math.floor(tabLength / 2)
this.tabList[middleIndex].middleClass = 'mid-button'
}
},
//Click the button
handlePush(item, index) {
if (this.tabIndex !== index) {
uni.reLaunch({
url: `${item.pagePath}?tabIndex=${index}`,
})
}
},
//Compatible with the display of bottom black lines on iPhoneX and above
getSystemInfo() {
uni.getSystemInfo({
success: (res) => {
// The top of special-shaped screens of X and above is 44, and the top of non-special-shaped screens is 20
if (res.safeArea.top > 20) {
this.showTabBar = true
}
}
});
},
}
}
</script>

<style lang="scss">
.flex {
display: flex;
flex-flow: row wrap;
}

.flex-center {
align-items: center;
justify-content: center;
}

.flex-column {
flex-direction: column;
}

.flex-middle {
align-items: center;
}
.font-20 {
font-size: 20rpx;
}
.tab-block {
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
background-size: contain;
width: 100vw;
.tab-list{
height:100rpx;
padding: 0;//solve offset
}
.tab-list-default{
background-color: #FFFFFF;
border-top: 1px #dddddd solid;
}
.tab-list-middle {
position: relative;
// background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
background-size: cover;
}
.list-item {
flex: 1;
\t\t\t
.item-img-box {
width: 44rpx;
height: 42rpx;
margin-bottom: 9rpx;
position: relative;
}

.item-img {
width: 44rpx;
height: 42rpx;
}
}

.mid-button {
position: relative;

.item-img-box {
width: 106rpx;
height: 106rpx;
margin-bottom: 9rpx;
position: absolute;
z-index: 1002;
top: -104rpx;
}

.item-img {
width: 106rpx;
height: 106rpx;
}

.item-text {
font-size: 20rpx;
position: absolute;
z-index: 1002;
bottom: -40rpx;
}
}

.tab-bar {
height: 30rpx;
background-color: #FFFFFF;
}
}
</style>

index.vue

<template>
<view class="content">
\t
<view class="text-area">
<text class="title">{<!-- -->{title}}</text>
</view>
<TabBar tabIndex=0></TabBar>
</view>
</template>

<script>
import TabBar from '../../components/tabBar/tabBar.vue'
export default {
components: {
TabBar
},
data() {
return {
title: 'I am the homepage'
}
},
onLoad() {

},
methods: {

}
}
</script>

<style>
\t
</style>