公告列表
公告列表
收藏
回答

cover-view样式在全面屏手机的显示异常

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug cover-view 客户端 6.7.3 2.4.0

- 当前 Bug 的表现（可附上截图）




- 预期表现


- 复现路径


- 提供一个最简复现 Demo

<view class='whole-bg'>
  <text class='title-text'>人脸识别</text>
  <text class='tip-text'>请确保是本人操作</text>
 
  <camera device-position="{{switch}}" flash="off" binderror="error" style="width: 250px; height: 250px;margin-top:80rpx;position: relative;z-index: 99;" id="myCamera">
    <!-- <cover-image class='camera-bg' src='../../image/camera_bg.png' mode='scaleToFill'></cover-image> -->
    <cover-view hidden='{{hiddenModal}}' class='pop-up'>
      <cover-view class='pop-up-container'>
        <cover-view class='tip-view'>
          <cover-view class='modal-title-text'>未能识别人脸</cover-view>
          <cover-view class='tip-text-modal'>正对手机更容易成功</cover-view>
        </cover-view>
        <cover-view class='line-row'></cover-view>
        <cover-view class='button-line'>
          <cover-view class='sure-btn'>
            <cover-view class='btn-text' bindtap='cancel'>退出</cover-view>
          </cover-view>
          <cover-view class='line-cloumn'></cover-view>
          <cover-view class='cancel-btn'>
            <cover-view class='btn-text' bindtap='confirm'>再试一次</cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
    </cover-view>
  </camera>
  <text class='title-text'>将人脸对准扫描处</text>
    <template is="oneBtnModalTemplate" data="{{title,content,sureText,ishiddenOneBtnModal}}" />
  <!-- <view class='weui-cell_ft switch'>
    <switch checked bindchange='switch1Change'></switch>
</view> -->
 
</view>
page {
  height: 100%;
}
 
.project-list {
  display: flex;
  flex-direction: column;
}
 
.project-item {
  margin: 10rpx 0 0 5rpx;
}
 
.project-git {
  font-size: 28rpx;
  color: blue;
}
 
.whole-bg {
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
 
.title-text {
  margin-top: 50rpx;
  font-size: 52rpx;
  color: #fff;
  font-weight: 500;
}
 
.tip-text {
  font-size: 36rpx;
  color: #fff;
  font-weight: 200;
  margin-top: 20rpx;
}
 
.camera-bg {
  width: 100%;
  height: 100%;
  z-index: 99;
  /* border-color: #fff;
  border-width: 1rpx;
  border-radius: 50%;
  margin-top: 150rpx; */
}
 
.modal-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
.modal-image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 30rpx;
}
 
.modal-title-text {
  font-weight: 700rpx;
  color: #000;
  background: #fff;
  font-size: 38rpx;
}
 
.tip-text-modal {
  width: 100%;
  text-align: center;
  font-size: 38rpx;
  color: #555;
  background: #fff;
}
 
.line-row {
  background: #eee;
  width: 100%;
  height: 2rpx;
}
 
.line-cloumn {
  background: #eee;
  width: 2rpx;
  height: 100%;
}
 
.content-view {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
.button-line {
  display: flex;
  height: 100rpx;
  width: 100%;
  background: #fff;
}
 
.sure-btn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
 
.cancel-btn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
 
.tip-view {
  padding-bottom: 50rpx;
  padding-top: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 150rpx;
}
 
.pop-up {
  position: fixed;
  /* top: 0;
  left: 0; */
  width: 100%;
  height: 100%;
  /* background-color: rgba(f, f, f, 0.7); */
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
.pop-up-container {
  width: 580rpx;
  height: 350rpx;
  background-color: #fff;
  border-radius: 8rpx;
  color: #fff;
  font-size: 28rpx;
  z-index: 9999;
}
 
.btn-text{
  color: #000;
  font-size: 28rpx;
}


最后一次编辑于  2018-11-13
回答关注问题邀请回答
收藏

2 个回答

  • DY
    DY
    2019-02-12

    楼主，人脸识别实现了吗，使用的是其他API吗，是用的图片还是摄像？能否给个DEMO？

    2019-02-12
    有用
    回复 1
    • 最末枝桠
      最末枝桠
      2019-04-22

      实现了  用的是face++  传的是图片

      2019-04-22
      赞
      回复
  • 是小白啊
    是小白啊
    2018-11-13

    提供一下出现问题的机型和微信版本，以及能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

    2018-11-13
    有用
    回复 7
    查看更多(2)
请 登录 后发表内容
相关文档