微信小程序video层级太高怎么办?

时间：2023-07-01 14:05 阅读数：120 人阅读分类：知识百科

　　微信小程序video层级太高怎么办?很多视频小程序在开发的时候，遇到小程序组件层级太高而出现问题，让很多人不知所措。下面小编给大家介绍微信小程序video层级太高怎么办?

　　微信小程序video层级太高怎么办?

　　最近有人问道，微信小程序的video组件层级太高，覆盖了悬浮按钮，这怎么处理呢?具体问题详情在下面。

　　最近在做微信小程序，现在需求中有个小程序页面需要背景视频，折腾了好久，好不容易在模拟器和测试机上测试通过，同事用iOS手机扫了一下，背景竟然覆盖了要显示的内容，一下懵了，在网上查了很多资料，好多都说是因为video是iOS系统的原生组件，层级太高，z-index不管用，确实，测试了z-index完全不管用，哪位大神有办法解决呢，跪求答案....

　　显然这人不知道如何处理，下面来说说解决办法。

　　在需要显示遮盖视频框video的时候，给div设置宽高、overflow:hidden;将video放到上面的div里，并设置position:absolute;top:-100000px; 给置出去div，它就看不见了，在需要显示video时，再设置回position和top的值就行了。而且有人亲自测试了有用。

　　下面小编给大家普及一下小程序video层级设置的知识。

　　重要属*：

　　小程序wxml：

　　点击显示视频组件

　　src="mvvideo1.meitudata/575c2b652d7375255.mp4"

　　style="width: 100%; height: 100%"

　　hidden="{{hiddenVideo}}"

　　binderror="listenerVideo" />123456789123456789

　　小程序js：

　　Page({

　　data:{

　　// text:"这是一个页面"

　　hiddenVideo: true

　　/**

　　* 监听视频加载错误状态

　　listenerVideo:function(e) {

　　console.log(e.detail.errMsg);

　　/**

　　* 监听button点击事件

　　listenerButton:function() {

　　this.setData({

　　hiddenVideo: !this.data.hiddenVideo

　　})

　　}

　　})

　　以上就是小编为大家搜集的微信小程序video层级太高怎么办的全部内容了，希望能帮到大家。如果你还有更多疑问或者建议，可以来我们微小乔的网站哦，谢谢大家的关注!