Uniapp 动态调整 Tabbar 菜单

软件开发功能从无到有,从少到多。或许是时候进入从多到少的阶段了,这几天一直在优化一些功能,尝试进一步优化用户体验。姨妈记录这件事情或许更多的人是习惯自己给自己记录,并不想要分享这些数据。基于这个原因,于是想着能够重新简化用户界面,隐藏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)
        }
    })
}

实际效果:

☆版权☆

* 网站名称:obaby@mars
* 网址:https://nai.dog/
* 个性:https://oba.by/
* 本文标题: 《Uniapp 动态调整 Tabbar 菜单》
* 本文链接:https://www.nai.dog/2024/02/15398
* 短链接:https://oba.by/?p=15398
* 转载文章请标明文章来源,原文标题以及原文链接。请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。


You may also like

14 comments

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

      新年好啊
      这都回去过年啦?
      不过年底这么多结婚的吗?我们这里好像没有呢。这年底了还得帮工啊?

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

      这些代码其实还好,不涉及核心逻辑。如果对 uni 框架比较熟悉应该也很容易实现,我是不专业,所以费了点时间,嘻嘻

  1. Level 1
    Google Chrome 120 Google Chrome 120 Windows 10 Windows 10 cn安徽省 移动/数据上网公共出口

    我开始还以为你整个tabbar不用原生呢(那样麻烦太多了),仔细一看原来不显示某一项。

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

      自己写太麻烦了,作为一个战五渣表示很吃力。哈哈哈。

  2.  Level 4
    Google Chrome 121 Google Chrome 121 Mac OS X 10.15 Mac OS X 10.15 cn江苏省无锡市宜兴市 电信

    页面里渲染的东西太多的话,uniapp有性能瓶颈,这个我做项目确实遇到过,官方好像有一个UniappX据说可以真正的编译成原生应用,但是目前ios端还没提供,所以没太玩过

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省 移动

      性能与原生相比肯定还有差距,这个只要是基于 js 引擎肯定会有性能损失。
      如果要编译原生其实可以用 dart 之类的,不过这个我是真没学过,哈哈哈。
      uniappx 没用过,找时间了解下。

  3. Level 3
    Google Chrome 86 Google Chrome 86 Windows 10 Windows 10 cn四川省成都市 联通

    上次看到你的图片上默认勾选的就是分享,当时就觉得有点不妥想说。
    后来一想,只是在APP中分享,也不是分享微信朋友圈,况且女人的心思,咱不懂,万一喜欢与闺蜜讨论这个呢。
    另外,以前有时出于好意,直言不讳,想帮助别人,反而引起对方不快或不满,造成矛盾和疏远。
    现在留言评论都小心谨慎多了,都不敢完全说出自己的直观想法了。

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省 移动

      需求这个东西每个人都有想法,一款产品不可能满足所有人的需求。
      我现在的想法是尽可能提供更多的自主配置功能,尽量满足用户自己的使用习惯。
      之前主要是增加功能,从无到有,现在主要是优化功能,从有到好。当然也会陆续加入一些新的功能。
      女人心海底针嘛,嘻嘻

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注