uniapp开发小程序，设置iphone底部安全区域_unicloud 苹果底部

//app.vue
//设备信息
onLaunch: async function () {
    let app = uni.getSystemInfoSync();
    console.log('设备信息', app)
    let top = app.safeArea.top //屏幕顶部安全距离
    let height = app.safeAreaInsets.bottom //屏幕底部安全距离
}
 
//vux 保存上面获取到的两个变量
this.set_top(top);
this.set_safeAreaBottom(height);
 methods: {
    ...mapActions(['setLogined', 'removeLogined']),
    ...mapMutations(['set_safeAreaBottom', 'set_top'])
  },

//vuex
const store = new Vuex.Store({
    state: {
        safeAreaBottom: 0,
        top: 0,
    mutations: {
        set_safeAreaBottom (state, data) {
            state.safeAreaBottom = data
        },
        set_top (state, data) {
            state.top = data
        },
    },
    actions: {
       ....
    }
})

//这里dom结构我举个例子，仅供参考
<view class="safeArea" :style="{ 'padding-bottom': `${safeAreaBottom + 114}` + 'rpx' }">
  <view class="content">
  </view>
//底部
  <view class="flex justify-around bg-white" style="width:100%;height: 100rpx;">
  </view>
</view>

上面dom结构的，根据需求是这样的：整个屏幕被两个view占满，其中底部view是固定在底部不动的，content内容立马是高度盛满剩下屏幕高度，并且overflow：scorll ； safeArea里面的动态样式中的safeAreaBottom是vuex保存的值，后面加的114，是底部高度再略高一点：“100+14” ，其中14你给不给随意。

.safeArea {
  height: 100%;
  // padding-bottom: var(--safeAreaBottom);
}
 
.content {
  height: 100%;
  overflow-y: scroll;
}

写到这里就没啦~ 手机顶部的安全距离 等有需求碰到了我再过来详细记录~~ 值已经在上面获取到了，就是vuex保存的top变量的值。