cover-view的使用

cover-view 在小程序中是比较特殊的组件，与 view 的最大区别在于，它能覆盖在原生组件 map、video、canvas、camera 之上，且只能嵌套 cover-view 和 cover-image。

简历详情页.png

如上图，在简历详情页面使用到了video组件，所以想在页面上，设置更高层级的视图且保证不被video覆盖，那么就需要使用cover-view了。由于项目需求是点击立即联系按钮，如果用户有可抵用红包，需要弹窗提示，预期效果如下：

自定义弹窗.png

cover-view默认属性有：

cover-view {
  display:block;
  line-height:1.2;
  overflow:hidden;
  white-space:nowrap;
  pointer-events:auto;
}

在项目中尝试设置cover-view显示的文本换行时，我修改 white-space 为 normal，在模拟器上是有效的，如下图所示：

模拟器运行效果.png

换真机时无效，subTitle内容没有换行显示

真机运行无效.png
改远程调试时也无效，但远程调试时在编辑器窗口修改属性（先删除white-space: normal;， 再勾选回来）真机上竟然又有效，懵～
转而查看代码：（只粘贴需换行显示部分的相关代码）

<!-- 红包抵用弹层 -->
<cover-view class="pop-up" hidden="{{modelHidden}}">
  <cover-view class="pop-up-container">
    <cover-view class="top-title">报告老板：有{{reviewNum}}个人正在看TA的短视频</cover-view>
    <cover-view class="tip-title">直接打电话效率最高</cover-view>
    <cover-view class="tip-subTitle">(大部分手机号可以加微信，申请备注在颜值招聘上看到)</cover-view> 
  </cover-view>
  <cover-image class="close" src="/image/close@3x.png" bindtap="closePopUp"></cover-image>
</cover-view>

/* 弹出层 */
.pop-up{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999999; 
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
}

.pop-up-container{
  width: 580rpx;
  background-color: #fff;
  border-radius: 8rpx;
  color: #666;
  font-size: 28rpx;
}

.top-title {
  background-color: #fe6dad;
  color: white;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}

.tip-title {
  margin-top: 60rpx;
  margin-left: 57rpx;
  color: #272727;
  font-size: 32rpx;
}

.tip-subTitle {
  margin: 10rpx 57rpx auto 57rpx;
  white-space: normal;
  line-height: 1.6;
}

给.tip-subTitle同时设置了真机依然无效

  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;

在小程序社区搜索相关问题，有人提到可能是flex布局问题，于是我在页面其他非flex布局的cover-view设置换行，如下图第8行代码处增加文字长度并设置了style：

尝试非flex布局设置cover-view内容换行.png
真机运行真的可以换行，所以推测弹窗上没出现换行可能是父类设置了display: flex; 目前因为改父类布局有点麻烦，所以在实现 cover-view 内容换行，投机取巧用了最笨的办法：
样式不动，在文本中添加了\n换行符强制换行

 <cover-view class="tip-subTitle">(大部分手机号可以加微信，申请备注\n在颜值招聘上看到)</cover-view> 

当然这对于确定文本可以适用，如果要换行的内容是绑定的数据且长度未知，那就不适用了，因为在文本的哪个位置添加换行符就难以确定。上述问题最本质的解决方案，应该是修改父容器的display: flex;属性。

另外针对项目中对cover-view使用中遇到的其他小问题进行总结：

1、cover-view是覆盖在原生组件之上的文本视图，只支持嵌套cover-view、cover-image
2、cover-view不支持text-decoration属性设置
3、cover-view设置文本内容换行 white-space: normal;（注意flex布局时可能不起效果哦）