小程序安全区域

1、自定义组件safe-area,在safe-area.js中设置参数

Component({
    properties: {
        area:String
    },
    data: {},
    methods: {}
});

2、编写布局文件，

主要就是一些布局样式文件，在safe-area.wxml

<view class="safe-area-{{area}}"/>

3、编写样式文件

在safe-area.wxss 中

.safe-area-top {
    width: 100%;
    padding-top: constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
    padding-top: env(safe-area-inset-top); /* 兼容 iOS >= 11.2 */
}

.safe-area-bottom {
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

.safe-area-left {
    width: 100%;
    padding-left: constant(safe-area-inset-left); /* 兼容 iOS < 11.2 */
    padding-left: env(safe-area-inset-left); /* 兼容 iOS >= 11.2 */
}

.safe-area-right {
    width: 100%;

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

.safe-area-all {
    width: 100%;

    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

4、使用

在app.json 中配置使用组件

  "usingComponents": {
  	......
    "i-safe-area":"/components/safe-area/safe-area"
  }

在布局中使用自定义组件

//底部安全区域
 <i-safe-area area="bottom"></i-safe-area>