UNIAPP自定义底部TabBar

1.项目中创建一个 components 文件夹
2.文件夹中创建一个TabBar文件夹，在其中创建TabBar.vue文件
3.将其源码复制到TabBar.vue中

<template>
	<view>
		<view class="content" :style="{zIndex}">
			<view class="tabber_box">
				<view v-for="(item,index) in tabBars" :key="index"
					:style="{width:`${ratio}%`,display:'flex',justifyContent:'space-around',margin: '24rpx 0'}">
					<view class="tabber_item" @click="onNav(item.pagePath)">
						<image v-if="currentPath === item.pagePath" :src="item.iconPath"></image>
						<image v-else :src="item.selectedIconPath"></image>
						<text
							:style="{color:currentPath === item.pagePath ? item.selectedColor : item.color}">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentPath: { // 当前页面路径
				type: String,
				default: '/pages/index/index',
			},
			zIndex: { // 界面层级
				type: Number,
				default: 10
			}

		},
		data() {
			const color = '#FFFFFF66';
			const selectedColor = '#FFF';
			return {
				tabBars: [{
						name: '首页',
						iconPath: '../../static/tabbar/index.png',
						selectedIconPath: '../../static/tabbar/selectd_index.png',
						pagePath: '/pages/index/index',
						color: '#8a8a8a',
						selectedColor: '#000000',
					},
					{
						name: '订单',
						iconPath: '../../static/tabbar/order.png',
						selectedIconPath: '../../static/tabbar/selectd_order.png',
						pagePath: '/pages/order/index',
						color: '#8a8a8a',
						selectedColor: '#000000',
					},
					{
						name: '我的',
						iconPath: '../../static/tabbar/my.png',
						selectedIconPath: '../../static/tabbar/selectd_my.png',
						pagePath: '/pages/user/index',
						color: '#8a8a8a',
						selectedColor: '#000000',
					},

				],
				ratio: 0,
				isLogin: false,
			}
		},
		mounted() {
			this.ratio = 100 / this.tabBars.length;
		},
		methods: {
			onNav(url) {
				if (this.currentPath !== url) uni.switchTab({
					url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>

下面是index.scss的内容

.content {
		position: fixed;
		bottom: 0;
		width: 100%;
		.tabber_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			background: #fff;
			padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx) ; // 适配iphoneX的底部
			padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx); /*兼容 IOS>11.2*/
			
			image {
				width: 56rpx;
				height: 56rpx;
			}
 
			.tabber_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;
			}
			
		}
	}

然后在全局中进行配置
1.打开main.js文件，写入一下代码将TabBar引入

import TabBar from '@/components/TabBar/index.vue'

2.引入成功后将其进行输出，还是在main.js中实现

Vue.component('TabBar', TabBar)

3.在需要TabBar.vue中定义的路劲文件中写入一下代码，并将其路劲传递即可

<TabBar currentPath='/pages/index/index' />

4.最后就是pages.json里面的内容

"tabBar": {
		"height": "0",
		"list": [{
			"pagePath": "pages/index/index"
		}, {
			"pagePath": "pages/order/index"
		}, {
			"pagePath": "pages/user/index"
		}]
	},

"height": "0",这个是关键必须要要有