微信小程序video组件嵌套子元素

场景

在这次项目开发中使用到了小程序的video组件需要实现显示视频信息刚开始Google了一下大🔥之前都是在video中嵌套cover-view组件如下：

// exmaple
<video>
  <cover-view>
    <!-- render video info -->
  </cover-view>
  <cover-image />
</video>

然后本以为cover-view能实现需求但是现在暴露一个问题

cover-view在官方文档中的描述是覆盖在原生组件之上的文本视图 所以如果页面中只是单纯的一个video组件看似没有问题但是如果有与video同级的组件就会出现大大小小的层级问题就意味着你的页面DOM结构的层级是十分混乱的使用cover-image同理

然后决定去官方文档寻找video相关的信息发现video组件（v2.4.0 起支持同层渲染）这就意味着只要微信基本库 >= 2.4.0就可以进行嵌套view组件而不是cover-view组件从而只需要操作z-index就能处理清晰处理层级问题如下：

// exmaple
<video>   // z-index -> 1
  <view> // z-index -> 2
    <!-- render video info -->
  </view>
  <image />  //z-index -> 3
</video>

然后又双叒叕以为实现了需求这时候却发现一个纯文字的view里的高度坍塌了我晕啦当时给我最大的感觉就是一定继承了父元素/祖先元素的属性推测可能性大概是font-size > line-height > height

果不其然在video组件中存在着line-height: 0的属性 css结构如下：

video {
  width: 300px;
  height: 225px;
  display: inline-block;
  line-height: 0;  /* -> 罪魁祸首 */
  overflow: hidden;
  position: relative;
  z-index: 0;
}
// 所以只需要在video嵌套的子元素中设定好line-height属性就行啦(默认值约为1.2

(估计是要兼容基本库 < 2.4.0的版本毕竟不支持同层渲染

拓展

如果大🔥用的是sass的话推荐一种处理上面z-index层级的方式

$zindex-dropdown-backdrop:  990 !default;
$zindex-navbar:            1000 !default;
$zindex-dropdown:          1000 !default;
$zindex-fixed:             1030 !default;
$zindex-sticky:            1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;
// 取自 bootstrap 代碼

摘自：你可能不知道的 Sass 技巧

结束了video组件的坑啦现在又要面临拖拽的新坑不说了搬砖去了