uni-app/微信小程序video组件层级过高覆盖悬浮按钮

本文探讨了uni-app和微信小程序中video组件层级过高覆盖悬浮按钮的问题,特别是在iOS设备上的现象。分析了两种情况及其解决方案,推荐在视频开始播放后显示悬浮按钮以避免覆盖。同时提供了终极方案的代码示例,并指出若video未占据一屏或悬浮按钮不在其上,则无需特殊处理。
摘要由CSDN通过智能技术生成

uni-app/微信小程序video组件层级过高覆盖悬浮按钮:

 

一、出现的概率与场景

具有偶然性,即概率性出现,也针对一些手机,尤其在ios版本的一些手机上!

 

二、分析:

大体分析说明:

一般的解决方法是采用原生组件cover-view,有图片的话再结合vover-image。但是,一般的悬浮按钮是相对于手机屏幕进行固定的(即不会随着划动被移动),如果采用cover-view、cover-image时,当滑动到一定距离的时候,悬浮按钮有时也会随着视频被划走,所以的话,需要分情况采用不同的解决方案去处理这个层级过高问题!

具体分析说明

如果要使悬浮按钮放在video之上,有2种情况与对应的解决方案:                                    

第一种:满足以下三个条件

  1. 页面的所有内容只占据一屏;
  2. video占据一屏;
  3. 一屏内容是被fixed;

此情况解决覆盖的方法࿱

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值