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

问题描述:

小程序中使用了 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 的上面显示) 
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值