1、前言

因为业务需要，使用uni-app来做小程序，但是底部icon太大了，完全不符合要求，本来看文档找到了下图的属性，以为可以改变大小，但是实验之后，查了资料，只支持App，小程序完全不起作用，所以只有自定义吧，然后又在插件市场找插件，才发现这市场是什么玩意，插件市场的东西太烂了，很多bug，然后我不光要修改自己的bug，还有改插件市场的bug，所以以后能不用uni-app就不用，没错，我就是那种一边用着人家的东西一边骂垃圾的人。然后各种百度，没找到符合要求，只给图片，不给源码，气的我要死，自己写！！！

2、coding

1）先放一张效果图，如下可以看到已经可以控制icon的宽高了

2）注释pages.json tabbar代码

3）编写tabbar组件

<template>
	<view class="tarbar">
		<view class=".tarbar-list" :style="{
	                background: tabBar.backgroundColor,
	                color: tabBar.color,
	                'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
	                'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0
	            }">
			<view class="tarbar-list-ul">
				<view class="tarbar-list-li" v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
					<block>
						<view class="tarbar-list-li-icon">
							<image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image>
						</view>
						<view :style='selected == index?"color:"+tabBar.selectedColor:""' class="tarbar-list-li-name">{{ item.text }}</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 		<block v-if="isShowMask">
			<release-popup @close-mask="closeMask"></release-popup>
		</block> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabBar: {
					color: '#999999',
					selectedColor: '#FE7F00',
					borderStyle: 'white',
					backgroundColor: '#fff',
					position: 'bottom',
					list: [{
							"pagePath": "/pages/index/index",
							"iconPath": "/static/image/vienna/home_inactive.png",
							"selectedIconPath": "/static/image/home_active.png",
							"text": "首页"
						},
						{
							"pagePath": "/pages/seach/index",
							"iconPath": "/static/image/vienna/classify_inactive.png",
							"selectedIconPath": "/static/image/classify_active.png",
							"text": "搜索"
						},
						{
							"pagePath": "/pages/car/index",
							"iconPath": "/static/image/vienna/cart_inactive.png",
							"selectedIconPath": "/static/image/cart_active.png",
							"text": "购物车"
						},
						{
							"pagePath": "/pages/my/index",
							"iconPath": "/static/image/vienna/user_inactive.png",
							"selectedIconPath": "/static/image/user_active.png",
							"text": "我的"
						}
					]
				},
				selected: this.current //当前激活项
			};
		},
		props: {
			current: { 
				type: [Number, String],
				default: 0
			}
		},
		methods: {
			setSelected(index) {
				if (this.selected == index) return
				// this.selected = index
				this.$emit('change', index)
			},
		},
		watch: {
			current: {
				handler(val) { // 
					this.selected = val
					const _this = this
					uni.setNavigationBarTitle({ // 设置顶部bar的标题
						title: _this.tabBar.list[val].text
					})
				},
				immediate: true
			}
		}
	}
</script>

<style>
	.tarbar {
		width: 100%;
		z-index: 9999;
		position: fixed;
	}

	.tarbar-list {
		width: 100%;
		height: 98upx;
		background: #4d586f;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.tarbar-list-ul {
		width: 100%;
		height: 100%;
		padding: 0upx 60upx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.tarbar-list-li {
		width: 80upx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.tarbar-list-li-icon {
		width: 50upx;
		height: 50upx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.tarbar-list-li-icon image {
		width: 36rpx;
		height: 36rpx;
	}

	.tarbar-list-li-name {
		width: 100%;
		text-align: center;
		line-height: 30upx;
		font-size: 24upx;
		height: 30upx;
	}

	.tarbar-list-li-center {
		width: 100upx;
	}
</style>

然后把你几个页面当成组件再加上一个tab-bar组件构建

4）最重点的部分来的
完成了上面的只是一部分，重点是在onShow中写如下代码，首先我在App.vue设置全局变量，如下图所示，所以只要进入onShow 就会根据toHome.flag来判断是否要切换tabbar，然后通过改变this.current来改变tabbar，这样就可以实现tabbar的切换了

onShow(param) {
			let toHome = getApp().globalData.toHome
			if (toHome.flag) {
				this.current = toHome.current
				getApp().globalData.toHome.flag = false
			}
			this.notifyShow = this.notifyShow + 1
		},

那么我从其他页面怎么跳到首页的相应页呢，比如我从商品详情页要跳到购物车页面，就可以使用下面代码,就可以跳转到购物车页面了

getApp().globalData.toHome.flag = true
getApp().globalData.toHome.current = 2 // 因为购物车索引为2 
	uni.reLaunch({  // 关闭所有页跳转
	        url: `/pages/home/home`
	})

3、notifyShow1（onShow不执行）

你肯定会好奇这个notifyShow1的属性代表什么意思，如下

那是因为你使用我上面的方法自定义tabbar之后，你会发现index search car my组件的onShow没用的，失灵了，所以我就在这四个组件监听了notifyShow1，看完下面的图你就清晰了，我每次进入home.vue(就是四个组件加tabbar的那个页面 不清楚的从上面的图找),home.vue执行onShow一次，this.notifyShow自加1，然后各页面就可以监听到改变，然后你就可以在各个页面的watch下执行你本来想在页面执行的步骤，解决自定义tabbar onShow失效的bug，这只是我做的时候的一种解决方法，因为任务也比较急，先使用这个吧，大佬们有好的办法，请在评论处告之，不胜感激！有疑惑，评论处见，源码是不可能给的，公司的

onShow(param) {
			let toHome = getApp().globalData.toHome
			if (toHome.flag) {
				this.current = toHome.current
				getApp().globalData.toHome.flag = false
			}
			this.notifyShow = this.notifyShow + 1
		},