iphonex的底部样式兼容
形成一个安全区域,解决iphonex兼容性问题
.bottom-wrapper {
margin-top: 24rpx;
height: calc(112rpx + env(safe-area-inset-bottom));
.bottom {
background-color: white;
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: constant(safe-area-inset-bottom);
height: 112rpx;
display: flex;
justify-content: center;
align-items: center;
.save-btn {
width: 686rpx;
height: 80rpx;
border-radius: 16rpx;
}
}
}
<view class="bottom-wrapper">
<view class="bottom">
<t-button disabled="{{disabled}}" theme="primary" t-class="save-btn" bind:tap="onSave"
>确认{{checked ? '(已选' + checked + '个不参加)' : ''}}</t-button
>
</view>
</view>