收藏
回答

关于微信小程序自定义custom-tab-bar的显示问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug custom-tab-bar 微信安卓客户端 8.0.19 2.22.0

异形屏与非异形屏都可以显示完好,但是一到真机模拟直接🤢

我的背景呢?

然后更气的是我另一个小程序是没有问题的无论是真机还是模拟器都是没有问题的

我只是换了张图片

为什么啊?求解答!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

.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>
回答关注问题邀请回答
收藏

1 个回答

  • Cjiang
    Cjiang
    2022-03-03

    具体什么显示问题?

    2022-03-03
    有用
    回复
登录 后发表内容