软件开发功能从无到有，从少到多。或许是时候进入从多到少的阶段了，这几天一直在优化一些功能，尝试进一步优化用户体验。姨妈记录这件事情或许更多的人是习惯自己给自己记录，并不想要分享这些数据。基于这个原因，于是想着能够重新简化用户界面，隐藏tabbar 中间闺蜜的相关功能。

网上搜索了一下解决方案，基本都是通过创建多个 tabbar list 的方式来实现的。这种方法基本是针对不同的用户权限设置完全不同的用户菜单，我并不想要这么复杂的功能，只是想动态控制中间的图标是否显示。

经过一番搜索，发现 uniapp 官方其实提供了相关的操作接口：

uni.setTabBarItem(OBJECT)

动态设置 tabBar 某一项的内容

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序
√	√	√	√（钉钉小程序不支持）	√	√	√	√	√

OBJECT参数说明：

属性	类型	默认值	必填	说明	平台差异
index	number		是	tabBar 的哪一项，从左边算起
text	String		否	tab 上的按钮文字
iconPath	String		否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效。微信小程序 2.7.0+、支付宝小程序支持网络图片，其他平台暂不支持网络图片
selectedIconPath	String		否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
pagePath	String		否	页面绝对路径，必须在 pages 中先定义，被替换掉的 pagePath 不会变成普通页面（仍然需要使用 uni.switchTab 跳转）	App（2.8.4+）、H5（2.8.4+）
visible	Boolean	true	否	该项是否显示	App（3.2.10+）、H5（3.2.10+）
iconfont	Object		否	字体图标，优先级高于 iconPath	App（3.4.4+）
success	Funtion		否	接口调用成功的回调函数
fail	Funtion		否	接口调用失败的回调函数
complete	Funtion		否	接口调用结束的回调函数（调用成功、失败都会执行）

我这里需要的设置的属性是：visible

直接撸代码：

// 单用户模式隐藏闺蜜tab
uni.setTabBarItem({
    index: 1,
    visible: !this.$getIsSingleUserMode(),
    success() {
        console.log('set tabbat: success')
    },
    fail(error) {
        console.log('set tabbat: ', error)
    }
})

不过在设置页面直接调用这个代码会提示{“errMsg“:“setTabBarBadge:fail not TabBar page“}，在没有 tabbar 的页面设置相关属性会直接报错。

针对这个提示最简单的办法是将代码放入用户页面进行设置，用户页面是带 tabbar 的，但是，直接把这个功能塞入用户页面有点太难看了。尝试了一下之后放弃了，准备采取另外的办法。因为本身这个设置是准备设计成可以保存的配置项，那么也就简单了，在配置页面通过 unistorage 存储配置，页面的 onShow 中读取配置来动态调整菜单就可以了，也省去了再写一套 tabbar list 的麻烦。

配置页面：

setSingleUserMode() {
    console.log('hide besties')
    // 此页面无法设置tabbar 
    this.isSingleUserMode = !this.isSingleUserMode;
    uni.setStorageSync(
        'isSingleUserMode',
        this.isSingleUserMode
    );
}

需要调整 tabbar 的页面：

onShow() {
    this.setCurrentPage(this);
    // 单用户模式隐藏闺蜜tab
    uni.setTabBarItem({
        index: 1,
        visible: !this.$getIsSingleUserMode(),
        success() {
            console.log('set tabbat: success')
        },
        fail(error) {
            console.log('set tabbat: ', error)
        }
    })
}

实际效果：

The post Uniapp 动态调整 Tabbar 菜单 first appeared on obaby@mars.