使用fixed定位把一个元素定位在页面距离底部102rpx单位的距离,加了安全距离,但是iPhone 12 mini 和 iPhone 12 pro max这两款手机距离底部的距离就变成几乎为0了,这是什么原因导致的
2***@qq.com
- 发布:2021-03-12 17:32
- 更新:2021-03-15 17:49
- 阅读:647
2***@qq.com (作者)
HBuilderX 和 手机都是最新的 其他ios正常 小程序
2021-03-22 10:45
DCloud_UNI_GSQ
回复 2***@qq.com: 最新版本多少?
2021-03-22 14:50
2***@qq.com (作者)
回复 DCloud_UNI_GSQ: HbuilderX 是3.1.4.20210305 iphone12mini是14.4.1
2021-03-22 15:00
DCloud_UNI_GSQ
回复 2***@qq.com: 示例提供一下,我看你怎么写的
2021-03-30 15:00
2***@qq.com (作者)
回复 DCloud_UNI_GSQ:
<view class="cart-bottom" :class="{ active: isIphoneX }" v-if="cartData.length || invalidGoods.length" :style="{ bottom: cartBottom }">
<view>{{is_iphone12}}</view>
<view class="all-election" @click="allElection">
<view class="iconfont" :class="checkAll ? 'iconyuan_checked ns-text-color' : 'iconyuan_checkbox'"></view>
<text>{{ $lang('allElection') }}</text>
</view>
<view class="settlement-info">
<text>
{{ $lang('total') }}:
<text class="ns-text-color">
{{ $lang('common.currencySymbol') }}
<text>{{ totalPrice }}</text>
</text>
</text>
</view>
<view class="operation-btn">
<button type="primary" size="mini" @click="settlement" v-if="totalCount != 0">{{ $lang('settlement') }}({{ totalCount }})</button>
<button type="primary" size="mini" @click="settlement" disabled v-else>{{ $lang('settlement') }}({{ totalCount }})</button>
</view>
</view>
cartBottom: '102rpx',
.cart-bottom {
position: fixed;
z-index: 5;
width: 100vw;
height: 100rpx;
background: #fff;
bottom: var(--window-bottom);
overflow: hidden;
display: flex;
bottom: 102rpx;
z-index: 9;
2021-03-30 16:32
DCloud_UNI_GSQ
回复 2***@qq.com: 你的代码不全,没看到你处理安全区相关的逻辑
2021-03-30 18:40
DCloud_UNI_GSQ
--window-bottom 是用于处理半透明 tabbar 的,而小程序也不支持
2021-03-30 18:41