自定义tabBar 可以使内容更贴近需求。不过有个不好的地方，第一次切换的时候会出现闪烁现象

一、pages.json文件中添加tarBar

    因为需要用到tabBar跳转，用于做判断是否tabBar切换(这里可以只添加路径，其他的可以不需要)

 二、把原生的tabBar隐藏起来

       在App.vue中把原生的 tabBar 隐藏起来 

三、自定义一个tabBar组件 

        注意：组件名称需要  和  组件目录名称一致

         在组件页面写好数据

<template>
	<view class="index">
		<view class="tabBar">
			<view class="TaBa">
				<view class="Tablist" v-for="(item,index) in tabBar.list" :key="index" @click="TabBar(item,index)">
					<view class="tabimg">
						<image :src="current === index?item.selectedIconPath:item.iconPath"></image>
					</view>
					<view :class="current === index?'TextColor':'Text'">
						{{item.text}}
					</view>
				</view>
			</view>

            
			<view class="TabBton">
				<view class="Vido">
				</view>
			</view>
		</view>
	</view>
</template>

tabBar里面的数据可以  根据业务需求 替换自己的

<script>
	export default {
		name: "tabBar",
		//接收自定义tabar组件页面的标识 用来判断是否当前点击页面
		props: {
			current: Number
		},
		data() {
			return {
				tabBar: {
					list: [{
							pagePath: "/pages/index/index",
							iconPath: "/static/Tdit/shouye.png",//这个放置未点击时的图片
							selectedIconPath: "/static/Tdit/shouye-h.png",//这个放置点击时的图片 
							text: "我的"
						},
						{
							pagePath: "/pages/FenleiQuery/FenleiQuery",
							iconPath: "",
							selectedIconPath: "",
							text: "分类"
						},
						{
							pagePath: "/pages/ShoppingCart/ShoppingCart",
							iconPath: "",
							selectedIconPath: "",
							text: "购物"
						},
						{
							pagePath: "/pages/PointsMall/PointsMall",
							iconPath: "",
							selectedIconPath: "",
							text: "商城"
						},
						{
							pagePath: "/pages/PersonalCenter/PersonalCenter",
							iconPath: "",
							selectedIconPath: "",
							text: "个人"
						}
					]
				},
			};
		},
		methods: {
			//底部tab跳转
			TabBar(item, index) {
				uni.switchTab({
					url: item.pagePath
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #F1F1F1;
	}

	.index {
		width: 100%;

		.tabBar {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 140rpx;
			background: #6868EE;
			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.TaBa {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.Tablist {
					display: flex;
					flex-direction: column;
					text-align: center;
					justify-content: center;

					.tabimg {
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 44rpx;
							height: 44rpx;
						}
					}

					.Text {
						margin-top: 5rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #999999;
					}

					.TextColor {
						margin-top: 5rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #F0AD4E;
					}
				}
			}

			.TabBton {
				width: 100%;
				height: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.Vido {
					width: 268rpx;
					height: 10rpx;
					background: #bfa;
					border-radius: 6rpx;
				}
			}
		}
	}
</style>

四、全局注册组件：在Page.json中配置如下

        如果有不知道的可以去官网查看一下说明：uni-app官网 

        如果需要特殊要求可以全局引用组件：列如自定义名称 (在项目  main.js 中)

        

 五、在每一个页面中引入使用

        注意：每个页面引入的时候 需要传 当前页面的  标识:（当前页面对应tabBar的位置）

第一个：

<template>
	<view class="index">
		<tabBar :current="0"></tabBar>
	</view>
</template>

第二个：

<template>
	<view class="index">
		<tabBar :current="1"></tabBar>
	</view>
</template>

希望能帮到有需要的人。 转载请注明来源

---