原样式：

修改后：

1、导入uview官方的tabbar组件

2、找到uview-ui--->componnets-->u-tabbar-->u-tabbar.vue

3、找到遍历的tabbarList，重新包裹一个盒子items

 4、添加items样式

.items {
        display: flex;
        width: 680rpx;
        height: 115rpx;
        margin: 0 auto;
        z-index: 998;
        // border: 1px solid red;
        overflow: hidden;
        border-radius: 100rpx; //圆角样式
        box-shadow: 0rpx 1rpx 14rpx 0rpx rgba(215, 215, 215, 0.42); //阴影样式
        background-color: #ffffff; //背景颜色
    }

 5、修改content样式

&__content {
            @include vue-flex;
            width: 100%;
            height: 115rpx !important;
            // border: 1px solid red;
            align-items: center;
            position: relative;
            position: fixed;
            bottom: 30rpx;  //这里控制距离底部的高度
            padding-bottom: 0rpx;
            padding-bottom:  calc(constant(safe-area-inset-bottom)); //适配iphoneX安全区
            padding-bottom: calc(env(safe-area-inset-bottom)); //适配iphoneX安全区
            // background-color: #fff;
            background-color: transparent;  //将原来的背景颜色修改为透明

 6、在tabbar底部添加iphone安全区的盒子（根据需求添加，需要控制安全区样式时添加）

    .safeBottom {
        width: 750rpx;
        // height: 68rpx;
        height: constant(safe-area-inset-bottom);    //适配iphoneX安全区
        height: env(safe-area-inset-bottom);   //适配iphoneX安全区
        // background-color: #fff; 
        border: 1px solid red;
        position: absolute;
        bottom: 0;
    }

7、附获取iphone安全区代码：

uni.getSystemInfo({
                success: function(res) {
                    console.log('获取手机信息',res);
                    console.log(res.safeAreaInsets.bottom)
                }
});

官方地址：https://uniapp.dcloud.io/api/system/info?id=getsysteminfo

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离;

 

CSS样式：

{

padding-bottom: constant(safe-area-inset-bottom);

padding-bottom: env(safe-area-inset-bottom);

}

env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。