https://blog.csdn.net/mr_chen95/article/details/79261987
在一些情况下,我们需要对map
、video
、canvas
、camera
这些微信小程序的原生控件,进行自定义,比如在camera
上添加一个矩形线框作为拍照区域,这时我们就需要使用到cover-view
这个控件。
cover-view
的使用方法与view基本一致,以下是一些注意点:
- 在同一父容器中,要在原生控件上添加布局,只能用
cover
类的控件,因为原生控件的层级处于顶层,即使将非cover
类的控件的z-index
设置到10000,依然层级在原生控件之下,被覆盖。 - 在原生控件
cover-view
作为父容器时,不能使用其他控件嵌套作为子元素,只能使用cover
类的控件,例如:cover-view
、cover-image
。
<cover-view class="img-wrap">
<cover-image class="img" src="/pages/web/images/dialog.png"/>
</cover-view>
.img-wrap { position: relative; 100%; padding-top: 42.3333%; }
.img { position: absolute; top: 0; left: 0; 100%; height: 100%; }