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>