uni-app编写小程序自定义tabBar

冷不防 2021-10-19 09:46 733阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pseV8xMDE_size_16_color_FFFFFF_t_70][]  
上图 红色的作为主页，绿色的以及蓝色的都作为组件

在主页的 tabBarIndex 方法里面处理页面跳转以及页面导航  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pseV8xMDE_size_16_color_FFFFFF_t_70 1]

--------------------

但是呢，上面这个方法会导致子页面的生命周期监听不到，所以不建议采用

--------------------

也是踩着坑过来的、、、、

然后又用了加载组件的方式去加载，然后页面切换又卡住了，放弃

最后再插件市场找到了可行性方案，

1.老老实实的定义tabBar
    2.再自定义一个tabbar组件
    3.使用 uni.hideTabBar({
    			animation: false
    		})
    方法把原生tabbar组件隐藏掉，
    4.在每个页面需要引用
    5.使用uni.switchTab切换平行组件
    6.使用vuex来管理选中状态
    	这里说一下为什么不用传参的形式向自定义组件里面，慢，第一次进入页面的时候，由于自定义组件需要加载时间，会有种超级不流畅的感觉。

–留给未来的自己

下面评论区有人给了更好的帖子，感谢。链接[添加链接描述][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pseV8xMDE_size_16_color_FFFFFF_t_70]: /images/20211018/f31666f5a4a546ad9907a917aad81cfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pseV8xMDE_size_16_color_FFFFFF_t_70 1]: /images/20211018/25d891aa28fc433d8ecc5c02541dc4e2.png
[Link 1]: https://blog.csdn.net/yanxinyun1990/article/details/101219095

发表评论取消回复

表情：

评论列表（有 0 条评论，733人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序自定义tabBar（实操）

文章目录一、前言二、固定效果图实现步骤实现步骤完整代码-矢量图 i

阳光穿透心脏的1/2处/ 2024年03月31日 08:47/ 0 赞/ 73 阅读

相关 uniapp使用vue3和ts开发小程序自定义tab栏，实现自定义凸出tabbar效果

![0727a2e708ee4b5a81ae186c87793caa.png][]要实现自定义的tabbar效果，可以使用自定义tab覆盖主tab来实现，当程序启动或者从后台显

红太狼/ 2024年02月19日 08:57/ 0 赞/ 70 阅读

相关微信小程序实现自定义tabbar

效果图： ![20191217155138719.gif][] 描述：实现自定义的tab栏，点击【教辅】、【我的】就切换tab，底部还会显示tabBar，但是点击中间

以你之姓@/ 2023年06月23日 04:56/ 0 赞/ 14 阅读

相关自定义tabbar

iOS 自定义tabbar 具体代码参考： [https://github.com/yuchenArron/TabBar][https_github.com_yuchenA

旧城等待，/ 2022年06月01日 03:26/ 0 赞/ 208 阅读

相关微信小程序动态自定义底部tabBar

微信小程序动态自定义底部tabBar 最近在做小程序的项目，由于用户需求在进入页面时进行选则角色，然后再进入小程序，这时看到的底部菜单看到的不一样，而我们都知道原生的ta

阳光穿透心脏的1/2处/ 2022年03月02日 14:50/ 0 赞/ 449 阅读

相关微信小程序自定义 tabbar

一定的需求情况下，无法使用小程序原生的 `tabbar` 的时候，需要自行实现一个和 `tabbar` 功能一模一样的自制组件。查阅了海量的博客和文档之后，亲自踩坑。总结了

怼烎@/ 2022年02月13日 14:27/ 0 赞/ 554 阅读

相关微信小程序之自定义tabbar

分为组件调用的形式和写入页面的形式如有需要，请发送邮件到邮箱13051819759@163.com。我会及时回复转载于:https://www.cnblogs.com

雨点打透心脏的1/2处/ 2021年11月02日 06:28/ 0 赞/ 442 阅读

相关 uni-app编写小程序自定义tabBar

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pseV8x

冷不防/ 2021年10月19日 09:46/ 0 赞/ 734 阅读

相关微信小程序——自定义tabbar样式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

矫情吗；*/ 2021年07月26日 01:52/ 0 赞/ 767 阅读

相关微信小程序中自定义 tabBar

自定义 tabBar：[https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-ta

快来打我*/ 2021年07月25日 15:16/ 0 赞/ 517 阅读