小程序首页弹窗遮挡tab栏怎么设置

Posted 2023-04-27

参考技术A 小程序首页弹窗遮挡tab栏怎么设置
这个方法就是完全放弃微信官方的tabbar；自己用SPA的方式去实现一个tabbar; 这个方法的优点：
tabbar能自己定制化；顺手也解决了盖不住的问题；
缺点在于：
要自己实现微信官方的实现的功能比如wx.switchTab等基础功能
需要自己实现路由管理
需要比较大测试成本
整体实现成本还是比较大的。 参考技术B 需要做一个授权登录的弹窗，改如何才能把小程序底部tabber栏遮住

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

这学习小程序中，仿做其他项目时遇到这种情况，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封面隐藏，播放视频，视频播放完毕后再把视频隐藏、封面显示，但是播放视频时还是存在开始所提到的问题