uniapptabbar的高度是多少_微信小程序自定义tabBar在uni-app的适配详解

引言：此方法可用作大部分微信小程序支持，但uni-app文档中却找不到相关说明的API

需求

需要在微信小程序中，实现一个中间图标突出显示的异形导航栏。

如下图

实现方法设计

要做这种异形的导航栏，用直接在配置文件里面写list的方法肯定做不到。那么，就有以下两种可替代方法。

在每一个页面都加载一个tabBar组件，与页面同时渲染。

设置自定义tabBar,修改tabBar的样式。

优缺点分析：方法1实现起来略为简单，但是会出现代码可重用率低，降低性能，已经界面跳动等问题。方法2则是微信官方提供的，自定义方式，相信在性能方面也会有很大的优势。故选择方法2。

1. 查看文档及官方Demo

简要描述一下就是需要在根目录中加入一个custom-tab-bar目录，里面的文件结构与自定义组件的结构一致。然后再在小程序配置文件中修改tabbar为custom模式。

主要重点为三个部分

配置文件

custom-tab-bar目录

页面生命周期中的设置索引方法

这段代码其实很容易理解，pageLifetimes就是监听组件所在页面的生命周期。上述代码就是监听页面显示。当页面显示后，获取到tabBar的对象，然后再设置tabBar中的index索引。