起因： 最近在用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 >
.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