【uniapp】微信小程序uniapp自定义底部导航栏

底部导航栏自定义

展示

该导航栏是基于微信导航栏的tabbar进行自定义的导航栏
自定义组件，组件中可以用微信的 cover-view代替
点击按钮触发uni.switchTab根据page.json中的url进行tabbar跳转
我这个目前是引用的自定义tabar组件，中间按钮凸出显示（多次切换有闪屏）这个，然后修改了他的bug，升级成为的。
不过也有问题，第一次切换会进行加载，tabbar会有闪，后面再进行切换便没有了。
如果有用希望点赞，如果有问题或者建议欢迎大家联系我，进行讨论。

主要文件目录

tabbar文件

<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"
					:class="{ specialColor: tabIndex == index}"
				>
					{{item.text}}
				</view>
			</li>
		</ul>
		
		<!-- 兼容iPhonex下面的小黑条 -->
		<view class="tab-bar" v-show="showTabBar === true"></view>
	</view>
</template>

<script>
	export default {
		props: {
			tabIndex: { //当前选中的tab项
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				/*
				 * iconPath: 默认icon图片路径
				 * selectedIconPath: 选中icon图片路径 
				 * text: tab按钮文字
				 * pagePath:页面路径
				 * middleClass:该按钮所有的特殊样式类名
				 * tabList最小两项，最多五项
				 * tabList长度为奇数时，中间按钮才会突出显示
				 * 
				 */
				tabList: [{
						iconPath: '/static/tabbar/index.png',
						selectedIconPath: "/static/tabbar/index_a.png",
						text: '首页',
						pagePath: '/pages/index/index',
						middleClass: ''
					},
					{
						iconPath: '/static/tabbar/activity.png',
						selectedIconPath: '/static/tabbar/activity_a.png',
						text: '活动',
						pagePath: '/pages/activity/activity',
						middleClass: ''
					},
					{
						iconPath: '/static/tabbar/tabbar-logo.png',
						selectedIconPath: '/static/tabbar/tabbar-logo.png',
						text: '商城',
						pagePath: '/pages/shop/shop',
						middleClass: ''
					},
					{
						iconPath: '/static/tabbar/shopCar.png',
						selectedIconPath: '/static/tabbar/shopCar_a.png',
						text: '购物车',
						pagePath: '/pages/shopCar/shopCar',
						middleClass: ''
					},
					{
						iconPath: '/static/tabbar/mine.png',
						selectedIconPath: '/static/tabbar/mine_a.png',
						text: '我的',
						pagePath: '/pages/mine/mine',
						middleClass: ''
					}
				],
				showTabBar: false,
				showMiddleButton: false,
			};
		},
		computed: {
			getHeight() {
				return Number(this.height);
			},
		},
		mounted() {
			this.getSystemInfo()
			this.setTabBar()
		},
		methods: {
			//判断中间按钮是否突出显示，奇数or偶数，奇数突出
			setTabBar(){
				let tabLength = this.tabList.length
				if (tabLength % 2) {
					debugger
					this.showMiddleButton = true
					// 向上取整
					let middleIndex = Math.floor(tabLength / 2)
					// 给中间的添加mid-button
					this.tabList[middleIndex].middleClass = 'mid-button'
				}
			},
			
			//点击按钮
			handlePush(item, index) {
				if (this.tabIndex !== index) {
					uni.switchTab({
					    url: item.pagePath
					})	
				}
			},
			
			//兼容iPhoneX以上底部黑线条的显示
			getSystemInfo() {
				//获取系统信息
				uni.getSystemInfo({
					success: (res) => {
						// X及以上的异形屏top为44，非异形屏为20
						if (res.safeArea.top > 20) {
							this.showTabBar = true
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.specialColor{
		color: rgb(229, 113, 1);
	}
	.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;
		}
		.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;
			.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>

在page.json中定义tabbar

一般添加了tabbar，微信会根据渲染出，记得在App.vue中用uni.hideTabBar将其隐藏

	"tabBar": {
	        // "selectedColor":"#79D5AD",
	        // "color": "#999999",
	        // "backgroundColor":"#ffffff",
	        // "borderStyle": "white",
	        // "height":"0px",
	        "list": [{
	            "pagePath":"pages/index/index",
	            "text": "首页"
	        },{
	            "pagePath":"pages/activity/activity",
	            "text": "活动"
	        },{
	            "pagePath":"pages/shop/shop",
	            "text": "商城"
	        },{
	            "pagePath":"pages/shopCar/shopCar",
	            "text": "购物车"
	        },{
	            "pagePath":"pages/mine/mine",
	            "text": "我的"
	        }]
	}

在main.js中将组建进行全局注册

//挂载tabbar组件于全局
import Tabbar from '@/components/tabbar/tabbar.vue'
Vue.component('view-tabbar', Tabbar)

在页面中引用组建

tabIndex为当前在组建中list的位置