6***@qq.com
6***@qq.com
  • 发布:2019-09-19 00:03
  • 更新:2019-09-19 00:03
  • 阅读:1743

小米8 手机 fixed布局 盒子边框会有白边

分类:uni-app

期望效果


苹果的ios端、小程序 和 安卓端app 均没问题
发现真机调试小米8 fixed布局下 盒子边框会有白边

结构
STATUS_BAR_H -- 状态栏高度
NAV_BAR_H -- 导航栏高度
TOTAL_H = STATUS_BAR_H + NAV_BAR_H

    <view class="custom-nav-bar">  
      <view class="custom-nav-bar__container custom-nav-bar_fixed">  
        <view class="status-bar-box"  
              :style="{'height':STATUS_BAR_H+'px'}"></view>  
        <view class="nav-bar-box"  
              :style="{'height':NAV_BAR_H+'px;'}"></view>  
      </view>  
      <!--  为fixed时 默认顶替 原空间  -->  
      <view class="my-nav-bar__replace"  
            :style="{'height':TOTAL_H+'px;'}"></view>  
    </view>  
    <view class="top-box">  
      <view class="gap"></view>  
      <view class="topinfo">  
        <view class="avatar-box">  
          <image class="user-avatar" @click="toLogin" :src="userInfo.defaultAvatar" alt=""/>  
        </view>  
        ......  
      </view>  
    </view>
// scss样式  
  .custom-nav-bar{  
    &__container{  
      background-image:linear-gradient( 90deg, rgb(229,61,97) 0%, rgb(244,140,120) 100%);  
    }  
    &__replace{  
      background-image:linear-gradient( 90deg, rgb(229,61,97) 0%, rgb(244,140,120) 100%);  
    }  
    &_fixed{  
      position: fixed;  
      width: 100%;  
      top: 0;  
      z-index: 99;  
    }  
  }  
.top-box{  
  display: flex;  
  align-items: flex-end;  
  height: 148upx;  
  .gap{  
    width: 100%;  
    height: 35upx;  
    background-image: linear-gradient( 90deg, rgb(229,61,97) 0%, rgb(244,140,120) 100%);  
  }  
 .top-info{  
    flex: 1;  
    display: flex;  
    align-items: flex-end;  
    position: relative;  
    background-color: #fff;  
    padding-left: 30upx;  
    box-sizing: border-box;  
    justify-content: space-between;  
    .avatar-box{  
      height: 144upx;  
      width: 144upx;  
      position: absolute;  
      //z-index: 100;  
      left: $pageLFpadding;  
      border-radius: 50%;  
      box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.35);  
      .user-avatar{  
        height: 133upx;  
        width: 133upx;  
        border-radius: inherit;  
        border: 7upx solid #fff;  
      }  
      &-replace{  
        width: 140upx;  
      }  
    }  
   ....  
 }  
}
2019-09-19 00:03 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复