微信小程序 video层级过高问题(手机版本兼容)

问题描述:

小程序中使用了 video 标签进行视频展示,点击按钮出现弹框,但是视频却还在弹框之上显示

原因:

因为原生组件的使用限制,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,故video 视频展示出现了弹框之上

解决方法:

  • cover-view 与 cover-image
    为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件,可以覆盖在map、video、textarea、canvas等部分原生组件上面,只支持嵌套cover-view、cover-image。

  • hidden 属性控制

  
    

//
  async openRoom (item) { 
       let rectInfo =await this.$u.getRect('.detailBox')   // 动态获取u-view 元素在屏幕中的的宽高度等
       this.topHeight=rectInfo.top  //可动态控制某元素的宽高等
       this.videoHidden=true    //根据需求动态控制 video 的显隐,来实现层级过高的问题控制
      this.visible = true  // 弹框的显示(需求是在 video 的上面显示) 
    },

你可能感兴趣的:(微信小程序,小程序)