uniapp小程序使用自定义底部tabbar，并根据用户类型动态切换tabbar数据

少油少盐不要辣2025-09-01 6:10

1.注意点

在pages.json中配置tabbar如下字段：custom：true ，会自动隐藏原生tabbar，使用自定义的tabbar

2.如何自定义呢

可以使用第三方组件库的tabbar组件，然后二次封装下内部封装逻辑：
1.点击切换逻辑
2.根据用户类型，动态切换tabbar数据

3.具体逻辑实现，代码如下

（1）封装的自定义tabbar组件如下：

javascript 复制代码

<template>
	<tui-tabbar :current="propIndex" backgroundColor="#fff" :tabBar="tabBar" color="#000" selectedColor="#FF7D0D"
		@click="tabbarSwitch" :unlined="true"></tui-tabbar>
</template>

<script>
	import {
		globalTabbarData
	} from '@/common/utils.js'
	const app = getApp()
	export default {
		data() {
			return {
				tabBar: globalTabbarData
			}
		},
		props:{
			propIndex: { // 父组件传入激活的tab索引
				default: 0
			}
		},
		created() {
			const userInfo = uni.getStorageSync('userInfo')
			// 用户类型
			if(!userInfo.userType) { // 普通用户
				this.tabBar = globalTabbarData.slice(2)
			} else { // 发布者
				this.tabBar = globalTabbarData.slice(0, 2)
			}
		},
		mounted() {
			uni.switchTab({
				url:  '/' + this.tabBar[this.propIndex].pagePath
			})
		},
		methods: {
			tabbarSwitch(e) {
				uni.switchTab({
					url:  '/' + this.tabBar[this.current].pagePath
				})
			},
		}
	}
</script>

（2）组件使用

javascript 复制代码

<custom-tabbar :propIndex="1" />