uni-app学习日记（二）

记录一下，自定义导航栏、设置底部元素时需要注意的布局问题

1、状态栏

uni-app开发移动端时，页面默认是沉浸式，关闭默认导航栏后，页面会覆盖手机顶部状态栏。这时候就需要获取状态栏高度，留出足够的距离。

方法一

<view class="status-box"></view>

// style
.status-box {
    height: var(--status-bar-height)
}

方法二

const systemInfo = uni.getSystemInfoSync() // 获取系统信息
systemInfo.statusBarHeight // 状态栏高度

方法三

配置manifest.json，关闭沉浸式
"app-plus": {
    "statusbar": {
	"immersed": false
    }
}

以上的方法适用于开发APP，开发小程序建议使用以下方法，更加精确。

小程序因为有“胶囊”存在的情况，我们除了预留状态栏的空间，还需要考虑与“胶囊”对齐

<view
    class="head"
    :style="{
        paddingTop: headerClient.top + 'px',
        height: headerClient.height + 'px',
        lineHeight: headerClient.height + 'px'}"
>
    导航栏
</view>
const headerClient = uni.getMenuButtonBoundingClientRect() // 获取“胶囊”的位置信息

底部安全区域

苹果手机，从iPhoneX开始，底部会有黑色横条，所以我们设置底部元素的时候要考虑底部距离，避免内容被遮挡。

方法一

<view class="bottom-box"></view>

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

方法二

const systemInfo = uni.getSystemInfoSync() // 获取系统信息
systemInfo.safeAreaInsets.bottom // 底部安全距离