问题描述:
小程序中使用了 video 标签进行视频展示,点击按钮出现弹框,但是视频却还在弹框之上显示
原因:
因为原生组件的使用限制,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,故video 视频展示出现了弹框之上
解决方法:
-
cover-view 与 cover-image
为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件,可以覆盖在map、video、textarea、canvas等部分原生组件上面,只支持嵌套cover-view、cover-image。 -
hidden 属性控制
<view class="cf-flex-row section_14" v-for="(item, i) in detailList || []"
:key="i" @click="() => openRoom(item)">
<video @click.stop class="image_11" v-if="item== 'mp4'" :hidden="videoHidden"// 可通过此熟悉控制层级过高问题
:src="item.fileKey"
@error="videoErrorCallback" />
<image class="image_11" v-else-if="item.thumbnailPicUrl"
:src="item.fileKey" />
</view>
//
async openRoom (item) {
let rectInfo =await this.$u.getRect('.detailBox') // 动态获取u-view 元素在屏幕中的的宽高度等
this.topHeight=rectInfo.top //可动态控制某元素的宽高等
this.videoHidden=true //根据需求动态控制 video 的显隐,来实现层级过高的问题控制
this.visible = true // 弹框的显示(需求是在 video 的上面显示)
},