如何解决直播带货系统源码中video组件覆盖其他元素的问题

因为疫情原因，直播带货系统源码成为人们娱乐的最佳途径。直播带货系统源码最主要的功能就是直播，而直播想要顺利播放，需要video组组件的支持，但是video组件的层级较高，可能会覆盖其他组件，直播带货系统源码是怎样解决这个问题的呢？

要想解决直播带货源码video组件的问题，简单而有效的一个方法，就是使用uniapp子窗体subNVue。

1、首先，创建.nvue后缀文件,编写原生vue组件，然后在pages.json的"pages"中，需要使用到subNvue的页面进行配置：

 "style": { 
"app-plus": {  
            "subNVues":[{  
                "id": "xx",  唯一标识  
                "path": "pages/subNvue页面路径不需要后缀 ",
                "type": 'popup', 内置的特殊子窗体类型，弹出(popup)和导航(navigationBar)。
                 一旦设置 type为navigationBar或 popup,position和dock 的值都会被忽略。
                "style": {  
                    "position": "absolute",  
                    "dock": "right",  
                     dock 表示原生子窗体的停靠位置只有当position值为 dock 时才生效，如 top, bottom,right, left 等
                    "width": "100upx",  
                    "height": "150upx",  
                     在配置中可以使用upx单位,方便你进行响应式布局。
                    "background": "transparent"  
                }  
            }]  
        }  
    }

2、通过获取subNVue实例的方式来设置子窗体样式

(1)通过 id 获取 nvue 子窗体  

const subNVue = uni.getSubNVueById('设置的id')

(2)打开 nvue 子窗体  

subNVue.show('slide-in-left', 300, function(){  
});

 (3)关闭 nvue 子窗体  

subNVue.hide('fade-out', 300)

(4)设置子窗体样式

subNVue.setStyle({  
    top: '100px',  
    left: '20px',  
    width: '100px',  
    height = '50px',  
})

通过以上操作，直播带货系统源码可以有效解决video组件的覆盖问题，其中，有关一些参数的设置以及效果，可以查看uniapp官方文档，本文不再赘述。

声明：以上内容为云豹科技原创，未经作者本人同意，禁止转载，否则将追究相关法律责任www.yunbaokj.com