• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序原生组件层级遮挡其他组件问题

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

这学习小程序中,仿做其他项目时遇到这种情况,video标签把自定义的导航栏(非小程序的tabBar),在把导航栏的z-index:9999也无济于事,这是因为video等原生组件的层级是最高的,所以无论所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上(后插入的原生组件可以覆盖之前的原生组件)

好在小程序为我们提供了解决这个问题的办法,那就是cover-view和cover-image组件,可以覆盖在部分原生组件上面。这两个组件也是原生组件,但是使用限制与其他原生组件有所不同

cover-view组件里面只能嵌套cover-view和cover-image组件,嵌套其他的组件如view组件,那么view 标签的子节点树在真机上都会被忽略

文档说明:https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

使用cover-view后的效果

 

但是这样又会出现一个新问题,那就是当导航栏使用position:fixed定位,视频全屏播放的时候,导航栏会出现在视频上方,效果

解决方法

1、导航栏不使用定位

2、不使用cover-view组件,在渲染页面的时候我们使用view视频的封面,当点击播放的时候把view封面隐藏,播放视频,视频播放完毕后再把视频隐藏、封面显示,但是播放视频时还是存在开始所提到的问题

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap