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; width: 100%; padding-top: 42.3333%; }
.img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }