小程序 video 层级,原生组件

  • 原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。

    • 后插入的原生组件可以覆盖之前的原生组件。
  • 原生组件还无法在 scroll-viewswiperpicker-viewmovable-view 中使用。
  • 部分CSS样式无法应用于原生组件,例如:
    • 无法对原生组件设置 CSS 动画
    • 无法定义原生组件为 position: fixed
    • 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域
  • 原生组件的事件监听不能使用 bind:eventname 的写法,只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。
  • 在iOS下,原生组件暂时不支持触摸相关事件。
  • 原生组件会遮挡 vConsole 弹出的调试面板。

意思是 video 是ios原生的组件  设置z-index是不行的

但是可以解决

官方为我们设置了 cover-view  这是个好东西

我解决的办法是

    <video initial-time="1" src="{{urlconfigs.bp_video(projectDetailsData.video)}}">
      <cover-view></cover-view>
    </video>

把 <cover-view></cover-view>  放在video里面 就ok了

原文地址:https://www.cnblogs.com/BeautifulBoy/p/9715355.html

时间: 2024-07-30 01:11:18

小程序 video 层级,原生组件的相关文章

微信小程序开发-地图map组件上使用input组件

微信小程序开发-地图map组件上使用input组件 标签: 微信小程序 uni-app 原生组件层级关系 微信小程序在最高层级 在微信小程序中原生组件包括camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video 在微信小程序开发中原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 pic

小程序无限层级路由方案

小程序无限层级路由方案 小程序原生页面存在层级限制,超过一定层数就会无法打开新页面.一开始这个限制为不超过5层,目前是不超过10层. 这个限制对于体量较大的小程序来说,挺难受的.特别是只能打开5层那会儿,业务流程很容易一不小心就超了,比如:首页-搜索结果页-商品详情页-聊天页-下单页-地址选择页-...:更有访问回路防不胜防,比如:商品详情页-查看更多页-商品详情页-查看更多页-....商品详情页-聊天页-个人主页-商品详情页-聊天页-个人主页-商品详情页-....诸如此类.即使后来放宽至了10

微信小程序(3)——常用的组件

view: view是小程序中的视图容器之一,似于html中的<div>标签 <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp" style="flex-direction:row;"> <view class=

微信小程序开发—快速掌握组件及API的方法---转载

微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支付等功能. 组件 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 对于开发文档,个人建议先了解其整体框架,了解其提供了哪些组件,再联想到这些组件会用在哪些产品的哪些功能.对于接口也是一样,整体了解,而不需要细看. 熟悉了文档的结构,

小程序---电影商城--娱乐组件

一.小程序---电影商城--娱乐组件 功能一:创建home添加元素并且修改外观 功能二:当组件创建成功后发送请求(调用云函数) movielist1906 onload 功能三:当前组件三种操作 (1)当前组件创建成功显示第一页 start:0.count:4 -onLoad -调用云函数movielist1906 -将云函数返回结果显示模块 (2)用户上滑屏幕加载下一页 57 -onReachBottom   事件:向上滑动触底 (3)当用户点击"详情"按钮跳转下一个组件 comme

微信小程序 cover-view在 Video(原生组件)中遇到的问题

1:解决disableScroll无法禁止小程序下拉的问题 disableScroll的优先级小于enablePullDownRefresh,因此如果app.json里是enablePullDownRefresh:true,那如果只是在page.json中加上disableScroll:true是无效的,需要在page.json中同时加上enablePullDownRefresh:false: 一般在app.json里写上"enablePullDownRefresh": false, 

如何使用微信小程序video组件播放视频

相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们在网络上随便找了一个简短的视频源.video组件的引用格式如下: [AppleScript] 纯文本查看 复制代码 ? 1 <video src="http://www.w3school.com.cn//i/movie.mp4" binderror="videoErrorC

跳出小程序 video组件 卡顿、黑屏、全屏等坑

前些天,朋友遇到一个小程序的问题叫我帮忙看看,说是ios上video组件会有严重的黑屏现象,这就有意思了. 知道问题后,我就开始试一试,发现如果页面只有一个video组件的话,是没有什么问题的.但是但页面有多个video的时候,问题就有点严重了: 1.设置了播放方式为非自动播放,但是进到页面的是还是时不时有一两个会自动播放 2.卡,页面很卡 3.进入全屏的时候,视频方向是根据宽高自己适配,但是退出全屏的时候,会出现这种情况:刚刚视频是横屏播放,退出了页面也是横屏 4.退出全屏后,页面上除了刚刚那

小程序-video/视频播放---part1:属性及部分函数

微信小程序视频播放和h5的video标签相同, 格式为:<video></video>. 其相关属性及其图文信息解析如下: 按钮相关: controls  显示默认播放控件(播放/暂停按钮.播放进度.时间) autoplay  自动播放  如果加上这个属性,包括弹幕在内的信息自动也自动显示 弹幕相关: danmu-btn  显示控制弹幕按钮 enable-danmu  显示弹幕信息 danmu-list="{{danmulist}}"  定义弹幕显示信息 绑定函