1.场景描述

微信小程序的标题栏，具体描述不需要太多解释，但是很多时候，不满足于默认的配置的时候，需要我们手动的去绘制一个tabbar。比如一般社交平台软件会要求中间有一个突出的发布按钮，此时就需要重新定制下tabbar了

2.思路

假设我们现在有这么一个需求，tabbar中的子项是根据api来获取的，比如商家有商家的入口，但是消费者没有这个入口，那么就需要从api中获取；此时，有了明确的需求，就需要有相对的开发思路，比如可以从‘自定义tabbar’下手，首先需要找到官方的文档(链接在下面)，基本就可以解决我们的需求了。但是还是水一下文章

3.代码实现

在2的条件下，其实已经可以实现出一个基本的tabbar，但是啰嗦下，基本思路是这样的

需要在app.json中配置tabbar的customer为true需要在app.json中配置所有的可能的路径，如：
在下方的list中列出所有的tab，比如

 "list": [{"pagePath": "pages/index/index","iconPath": "static/images/toolbar/found_unselect.png","selectedIconPath": "static/images/toolbar/found_select.png","text": "发现"},{"pagePath": "pages/ticket/index","iconPath": "static/images/toolbar/ticket_unselect.png","selectedIconPath": "static/images/toolbar/ticket_select.png","text": "验卷"} ,{"pagePath": "pages/mine/index","iconPath": "static/images/toolbar/mine_unselect.png","selectedIconPath": "static/images/toolbar/mine_select.png","text": "我的"}]

在custom-tab-bar的文件夹中，需要在ts文件中设置真正的路径，比如
而相对应的ui页面，可以直接使用微信小程序中模板默认的

4.效果图

5.善后

这个关卡很重要，如果看到这儿的小伙伴，会发现点击不同的tab的时候，会闪动，而且会错乱，我也尝试过按照微信介绍的更新方式去重新setdata，但是还是有问题，查询了一些博客。学到了下面的方式
就是一开始的时候，设置下标null，然后进入到相对的页面的时候，去动态的设置index。此时就需要结合实际了，比如你的我的页面，他的tabindex是多少，代码如下

  // 重新设置tab的下标resetTabIndex() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({selected: getApp().globalData.tabList.length -1|| 1})}},

6.想法

大体也想过，出现闪烁问题，是因为页面新加载，所以有点bug，也想过正面解决，但是感觉这种应用问题，不需要深究，就直接安照5的方式解决了

参考链接:
微信小程序开发文档-自定义标题栏
小程序tabbar闪烁

微信小程序自定义tabbar以及闪烁问题相关推荐

微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
微信小程序自定义tab-bar遇到的问题及解决方案
微信小程序自定义tab-bar遇到的问题及解决方案小程序自定义tab-bar 问题一:需要点击两次才能变成选中装填解决方案: 问题二:真机查看的时候,切换页面的时候会从上到下解决方案: 小程序自 ...
微信小程序自定义tabbar【中间凸起样式】
微信小程序自定义tabBar样式,选中后中间凸起效果预览微信开发文档:自定义tabBar 一.配置信息在 app.json 中的 tabBar 中指定 custom 字段为 true[允许使用自 ...
微信小程序自定义tabbar底部菜单
自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景. 在自定义 tabBar 模式下,为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配 ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...
微信小程序自定义tabBar以及图标-使用vant-weapp
小程序整合vant weapp可以看<微信小程序vant weapp安装与使用> 微信官方文档有介绍自定义tabBar 1.在小程序根目录下创建custom-tab-bar文件夹,并创建以 ...
微信小程序自定义tabbar、自定义导航、分包
自定义tabbar 在项目根目录下创建custom-tab-bar文件夹,在该文件夹下创建组件自定义tabbar作为一个自定义组件进行构建.构建完毕后在app.json中的tabBar选项中配置cu ...
微信小程序自定义tabBar（实操）
文章目录一.前言二.固定效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json代码三.自定义效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json ...
微信小程序自定义TabBar和NavBar
先看效果图看似和正常开发的小程序布局相同,但代码却不相同,从而在自定义的代码中可以编写在默认模板中不能帮助我们完成的事情. 首先来说TabBar,这个内容的实现很容易,Flex布局嘛,除了这种很普通 ...
微信小程序自定义tabbar中间凸起
在网上找了很多自定义tabbar的例子很多都是定义组件然后在需要tabbar的页面底部放置组件,这样导致页面加载的时候tabbar也会跟着重新加载网络卡顿是影响用户体验. 根据官方文档tabbar自定 ...

微信小程序自定义tabbar以及闪烁问题