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

发布来源:云豹科技
发布人:云豹科技
2021-12-06 10:07:36

因为疫情原因,直播带货系统源码成为人们娱乐的最佳途径。直播带货系统源码最主要的功能就是直播,而直播想要顺利播放,需要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

声明:
以上内容为云豹科技作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任
立即查看