BeforeMount
BeforeMount
  • 发布:2025-08-01 12:30
  • 更新:2025-08-01 15:34
  • 阅读:152

请教下自定义tabbar换色的方案

分类:uni-app

封个tabbar组件,每个页面引,第一次切的时候会闪烁。
我看都是引tabbar和所有页面在一个页面上规避的,tabbar页面上有23个页有点复杂,跑到小程序上很卡,真机上没问题,怕上线时候有手机卡

一般还有什么实现方案

2025-08-01 12:30 负责人:无 分享
已邀请:
Eupotia

Eupotia - 道阻且长,行则将至。

把图标换成字体图标,这样就可以换色了;

配合 uni-icons 使用

  • BeforeMount (作者)

    tabbar兼容问题呢

    2025-08-04 16:45

  • Eupotia

    回复 BeforeMount: 没什么好的办法;你是要23个页面都展示tabbar?有点奇怪啊,是不是我理解错了?


    一般来说tab都是3~5个,这种情况可以保留 pages.json里面的tabbar配置,可以继续使用 uni.switchTab来跳转页面,而且这些tab页表现跟原生的一样,比如只会触发一次 onLoad,再次进入只触发 onShow,页面滚动的位置一般也会保存;这种方式存在的问题是每个tab第一次打开的时候,tab会闪烁一下;再次打开就不会了。


    如果没有办法接受闪烁,就会把pages.json里面的tabbar配置删掉,把这几个tab页面封装成组件,然后在一个页面上引入tabbar组件、tab页面组件,在切换tab的时候切换组件的展示,这样做就不会有闪烁;但这种方式也会存在一些问题,比如每个tab页的滚动的位置、已经加载的数据等内容,在切换tab之后如果保存,实现跟原生tab一致的表现,而且因为是组件,缺少一些页面级别的钩子函数,实现起来可能会有想不到的问题.....

    2025-08-04 17:16

  • BeforeMount (作者)

    回复 Eupotia: 我是5个tab,但是里面有2个页逻辑很多,用第二种在微信开发者工具就很卡,手机上没问题,怕上线了有问题 不敢用这种方式

    2025-08-04 17:57

  • Eupotia

    回复 BeforeMount: 确实是会有性能问题的,如果能够接受闪烁一下,还是用第一种方式吧。


    我做这个自定义tabbar的时候就用第一种,原来的代码也不用怎么改,就在那几个tab页面引入自定义的tabbar组件,然后加上 uni.hideTabbar()就完事儿了;


    如果必须要用第二种方式,那应该是把一个页面设置为tab,然后在这个页面引入你真实的tab页组件就好了,不用把所有页面都引入吧

    2025-08-04 18:16

要回复问题请先登录注册