uniapp 微信小程序使用uview u-tabbar组件自定义tabbar

1.在components文件下面新建TabBar.vue组件, 使用uview的u-tabbar组件进行二次封装; u-tabbar组件中value取当前匹配项的name, 一般从父组件传过来即可; 在u-tabbar-item标签内可以使用插槽 slot='inactive-icon'(选中的图标)和slot='inactive-icon'(未选中的图标)自定义图片样式

u-tabbar组件默认已经为iPhoneX等机型留出底部安全距离, 具体可以看uview官方文档

<template>
	<view>
		<u-tabbar
			:value="currentTab"
			activeColor="#2D73F0"
			inactiveColor="#333"
		>
			<u-tabbar-item 
				v-for="(item,i) in tabList" 
				:key="item.name"
				:text="item.text" 
				:name="item.name"
				@click="handTab(item)"
			>
				<image class="bar_img" slot='active-icon' :src="item.selectedIconPath"></image>
				<image class="bar_img" slot='inactive-icon' :src="item.iconPath"></image>
			</u-tabbar-item>
			
		</u-tabbar>
	</view>
</template>
 
<script>
	export default {
		name:"TabBar",
		props: {
			currentTab: {
				type: String,
				default: 'home'
			}
		},
		data() {
			return {
				tabList: [
					{
						"pagePath": "/pages/home",
						"iconPath": "/static/home.png",
						"selectedIconPath": "/static/home_sec.png",
						"text": "首页",
						"name": 'home',
					},
					{
						"pagePath": "/pages/user",
						"iconPath": "/static/user.png",
						"selectedIconPath": "/static/user_sec.png",
						"text": "我的",
						"name": "user"
					}
				]
			}
		},
		methods: {
			handTab(row) {
				uni.switchTab({
					url: row.pagePath
				})
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.bar_img{
		width: 54rpx;
		height: 54rpx;
	}
</style>

2.pages.json里面配置tabBar里面的custom为true

3.在home和user页面引入自定义的组件TabBar, 这样就完成基本的自定义tabbar, 根据不同的需求可以修改里面的逻辑, 比如不同角色进来的tabbar不一样, 个别tabbar没有文字就显示一个大图等等.