起因： 最近在用uniapp开发的时候遇到了刘海屏手机tabbar适配问题，一开始用uni官方自带的tabbar，后来发现不能满足开发需求。于是在插件市场上找了一个自定义的footer自己重写了一下。拿出来记录一下。（我这里不是不建议大家用官方的tabbar，如果你恰好和我一样遇到官方tabbar不能解决的问题，需要自定义一个tabbar，那么建议你继续阅读）

一、我不用uni-app自带tabbar的原因

           无法自定义tabbar样式，虽然uni官方tabbar自带了很多公用api，但当需要底部tabbar 中间的按钮凸起的时候，官方tabbar还是没有集成的。

           再比如自定义性不强，比如uni.setTabBarStyle只能设置tabbar的整体样式

                  最后纯属博主个人审美，官方自带tabbar在处理tabbar底部安全区的时候padding距离过大，导致整体格外的丑..

                  如图：

                                  

                   这个间距我不能忍受。。。

 

二、不用官方tabbar，如何适配刘海屏手机底部

          2.1 直接上方法

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

           注意：两者顺序不能换，先constant，再env。如果不用padding，也可以用margin、固定height高度等方式来适配间距。但楼主在less用混合运算会报错，比如:

height: 60rpx + constant(safe-area-inset-bottom); // 在less里编译报错

          2.2   原理

          在IOS 11中的WebKit包含了一个新的CSS函数constant()，以及一组四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom。且IOS11.2之前是constant，IOS11.2之后是env，为了做兼容，这两者要同时写在css文件里面。这四个预定义的常量用来设定安全区域与边界的距离。且这四个值只有在viewport-fit=cover时才生效，默认值auto、或者viewport-fit=contain时是不生效的。

                  safe-area-inset-left：安全区域距离左边边界距离

                  safe-area-inset-right：安全区域距离右边边界距离

                  safe-area-inset-top：安全区域距离顶部边界距离

                  safe-area-inset-bottom：安全区域距离底部边界距离

          什么是viewport-fit？

          IOS11 新增特性，苹果为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：auto(默认，表现和contain一致) ， contain， cover

                      细心的朋友会发现uni-app自动生成的项目里 public/index.html 里有这么一段代码：

var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')

             也就是uni默认为我们写好了如果该环境支持这个新函数，则设置当前viewport-fit为cover，即全屏占满显示。如果是普通的h5项目，则需要我们手动添加：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover"/>

三、最后使用的tabbar组件

           博主在插件市场上找了一圈，最后决定使用插件地址如下：

           https://ext.dcloud.net.cn/plugin?id=1274

           自己再适配一下tabbar底部样式就可以了。 增加的scss样式如下

<style lang="scss">
	.tabBar_list{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; }
    .border_box{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; }
</style>

          最后适配效果如下：

                                  

         这里注意如果像博主一样在tabbar上面做了一个吸底，也需要做相应的适配，在原有的样式上加margin-bottom即可

 

         参考文章：

         1. https://blog.csdn.net/weixin_37242696/article/details/80228702

         2. https://blog.csdn.net/sd19871122/article/details/80989704

         3. https://uniapp.dcloud.io/api/ui/tabbar

         4. https://ext.dcloud.net.cn/plugin?id=1274