异形屏与非异形屏都可以显示完好,但是一到真机模拟直接🤢
我的背景呢?
然后更气的是我另一个小程序是没有问题的无论是真机还是模拟器都是没有问题的
我只是换了张图片
为什么啊?求解答!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 87px;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar .background-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 750rpx;
height: 80px;
}
.tab-bar .tab-bar-backgrond {
position: absolute;
bottom: 180px;
left: 0;
width: 750rpx;
height: 107px;
background-color: #fff;
z-index: 0;
}
.tab-bar-border {
display: none;
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 40px;
position: relative;
z-index: 1;
}
.tab-bar-item.item-vcode cover-view {
color: rgba(214, 24, 25, 1) !important;
}
.tab-bar-item cover-image {
width: 27px;
height: 27px;
}
.tab-bar-item.item-vcode cover-image {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 20px;
transform: translate(-50%, 0);
}
.tab-bar-item cover-view {
font-size: 10px;
}
.tab-bar-item.item-vcode cover-view {
margin-top: 24px;
}
.redcolor{
color: rgba(214, 24, 25, 1);
}
.tab-bar-item.item-vcode cover-image {
width: 65px;
height: 65px;
position: absolute;
left: 50%;
top: 7px;
transform: translate(-50%, 0);
}
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.type == 'vcode' ? 'item-vcode' : ''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}};">{{item.text}}</cover-view>
</cover-view>
<cover-image style="bottom: {{isIphoneX ? '35' : '0'}}px;" class="background-bottom" src="/image/tab/tab_bgc.png"></cover-image>
<cover-view wx:if="{{isIphoneX}}" class="tab-bar-backgrond"></cover-view>
</cover-view>

具体什么显示问题?