uniapp视频层级问题

uniapp视频层级影响页面问题

需求：底部操作框在最高层级

问题：视频遮挡住了操作框

参考博客-video标签层级问题

官方文档说明

解决①：使用cover-view

参考文档-cover-view

1. 使用方式：在需要覆盖的video里面使用

// videoZindex1-coverView.vue页面
<videosrc="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"style="width: 100%;position: relative;"><cover-viewclass="cover-box"><cover-view>覆盖的内容</cover-view></cover-view></video>
// 样式
<stylelang="less"scoped>.cover-box{position: fixed;bottom: 0;width: 100%;height: 120rpx;background-color: yellow;}</style>

2. 最终效果

只能子绝父相覆盖视频，fixed固定定位仍然不能覆盖视频，不符合我的需求

解决②：使用plus.nativeObj.view

参考文档-原生控件-View

1. 使用方式

// videoZindex2-plus.vue页面
<script>exportdefault{data(){return{optionView:null}},onLoad(){// 这里我的高度统一是120rpx，但是plus不能用rpx，所以需要算一下let rpxUnit =1
            uni.getSystemInfo({success:(info)=>{
                    rpxUnit = info.screenWidth /750}});this.optionView =newplus.nativeObj.View("option-view",{position:"dock",dock:"bottom",width:"100%",height:`${rpxUnit*120}px`,bottom:0,backgroundColor:"#fff",},[{id:"rect-id",tag:"rect",color:"#f98d2b",position:{top:`${rpxUnit*20}px`,bottom:`${rpxUnit*20}px`,left:`${rpxUnit*225}px`,right:`${rpxUnit*225}px`,},rectStyles:{radius:`${rpxUnit*40}px`}},{id:'font-id',tag:'font',text:'操作',position:{top:`${rpxUnit*20}px`,bottom:`${rpxUnit*20}px`,left:`${rpxUnit*225}px`,right:`${rpxUnit*225}px`,},textStyles:{align:"center",color:"#fff",size:'18px'}}]);this.optionView.show()},onUnload(){this.optionView.close()},methods:{}}</script>

2. 最终结果

1. 层级最高，退出页面前需要关闭。
2. 渲染到页面上的是一块画布，无法进行精准的按钮点击交互。
3. 标签书写动态样式难度较大。

解决③：使用subNVue（最终采取）

参考文档-原生子窗体
参考文档-subNvue使用

1. 新建subNvue子窗体

2. 使用原生子窗体的pages.json配置

3. 使用subNvue子窗体

这里我需要一直显示，在页面加载的时候就显示，实际上这个子窗体可以在任何时机显示和隐藏。

onLoad(){const subNvue = uni.getSubNVueById("bottom-fixed-operation-box")
        subNvue.show("none",0,()=>{})},

4. 书写subNvue子窗体

// operation.nvue子窗体页面
<template><viewclass="operation-box"><buttonclass="btn-self"@click="operationFun"><textclass="font-box">操作</text></button></view></template><script>exportdefault{onLoad(){
            uni.$on("back",(e)=>{
                console.log("监听页面事件",e);})},methods:{operationFun(){
                console.log("点击");
                uni.$emit('bottom-fixed-operation-box',"参数")}}}</script><stylescoped>.operation-box{display: flex;flex-direction: row;justify-content: space-around;align-items: center;width: 749rpx;height: 119rpx;background-color: #fff;}.btn-self{width: 300rpx;height: 80rpx;background-color: #f98d2b;border-radius: 50px;margin: 0;}.font-box{color: #fff;font-size: 28rpx;line-height: 80rpx;}</style>

// videoZindex3-subNvue.vue 使用子窗体的页面
<template><viewstyle="padding: 0 50rpx;"><viewv-for="item in 10":key="item"style="height: 100rpx;background-color: pink;">
            其它内容
        </view><videosrc="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"style="width: 100%;"></video><viewv-for="item in 5":key="item"style="height: 100rpx;background-color: pink;">
            其它内容
        </view></view><!-- <view class="seat"> </view>
    <view class="button-box">
        <button class="btn-self">操作</button>
    </view> --></template><script>exportdefault{data(){return{}},onLoad(){const subNvue = uni.getSubNVueById("bottom-fixed-operation-box")
            subNvue.show("none",0,()=>{})
            uni.$on("bottom-fixed-operation-box",(e)=>{
                console.log("参数",e);this.operationFun()})},mounted(){
            uni.$emit("back","发送给子窗体的参数")},methods:{operationFun(){
                console.log("页面获取到了子窗体的点击事件，继续其它操作。");}}}</script><stylelang="less"scoped>.seat{height: 120rpx;}.button-box{display: flex;justify-content: space-around;position: fixed;bottom: 0;width: 100%;color: #666;font-size: 28rpx;background-color: #fff;background-color: yellow;padding: 20rpx 40rpx;box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.2);box-sizing: border-box;z-index: 10;.btn-self{width: 40%;height: 80rpx;color: #fff;font-size: 28rpx;line-height: 80rpx;background-color: #f98d2b;border-radius: 50px;margin: 0;}}</style>

5. 子窗体通讯：全局自定义事件

可以在页面的vue文件发送事件，子窗口nvue文件监听；
也可以在子窗口nvue文件发送事件，页面vue文件监听

发送：

uni.$emit('bottom-fixed-operation-box',"参数")

接收：

uni.$on("bottom-fixed-operation-box",(e)=>{
    console.log("参数",e);// 响应后的其它操作})

6. 最终效果：底部操作层级比视频高，符合需求

7. 踩坑总结

1. 在vue页面自定义监听事件需要在离开页面前移除，即uni.$on("your-event")和uni.$off("your-event")需要搭配使用，否则再次进入页面时，触发事件时会多次执行$on里的操作。

// 举例：
uni.$on("bottom-fixed-operation-box",(e)=>{
    uni.navigateTo({url:'/pages/...'})})// 结果：多次进入页面时候触发此事件会进行多次页面跳转

1. subNvue子窗体向vue页面传递数据异常 这里我的需求是动态显示一个或两个操作按钮，但是在onLoad()里的uni.$on似乎比其它代码都优先执行，uni.$off也不生效，重复进入页面仍会多次接收uni.$emit的触发事件，无法实现动态交互。 但是项目需要这个功能，没办法，调试两天无果后，只能写两个原生子窗口，动态决定显示哪个。

我的demo

demo的gitee地址