uni-app popup 抖音小程序底部安全区留白问题

现象

uni-popup控件，底部弹出时出现了34px的空白。

safe-area属性默认为true，表示适配底部安全区，但不生效。

解决

显式指定safe-area为false。

同时为了兼容H5，编写条件编译CSS。

代码

<template>
    <uni-popup ref="myPopup" :safe-area="false">
        <view class="popup-content">
            <view>a</view>
            <view>a</view>
            <view>a</view>
        </view>
    </uni-popup>
</template>

<style>
    .popup-content {
        /* #ifdef H5 */
        margin-bottom: var(--window-bottom);
        /* #endif */
    }
</style>

文档

https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html