uniapp 子窗体subNVue(解决如App中video组件上覆盖多样性内容)

电玩女神 2021-07-25 00:54 1913阅读 0赞

1、创建.nvue后缀文件,编写原生vue组件
    
    2、在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"  
                    }  
                }]  
            }  
        }
        
    3、通过获取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',  
    		})
    
    
    4、参数设置
    	position 	原生子窗体的排版位置，排版位置决定原生子窗体在父窗口中的定位方式。 
    		"static"，原生子窗体在页面中正常定位，如果页面存在滚动条则随窗口内容滚动；
    		"absolute"，原生子窗体在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动；
    		"dock"，原生子窗体在页面中停靠，停靠的位置由dock属性值决定。 默认值为"absolute"。
    	dock 	原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效，可取值："top"，原生子窗体停靠则页面顶部；"bottom"，原生子窗体停靠在页面底部；"right"，原生子窗体停靠在页面右侧；"left"，原生子窗体停靠在页面左侧。 默认值为"bottom"。
    	mask 	原生子窗体的遮罩层,仅当原生子窗体 "type" 属性值设置为 "popup" 时才生效，可取值： rgba格式字符串，定义纯色遮罩层样式，如"rgba(0,0,0,0.5)"，表示黑色半透明；
    	width 	原生子窗体的宽度,支持百分比、像素值，默认为100%。未设置width属性值时，可同时设置left和right属性值改变窗口的默认宽度。
    	height 	原生子窗体的高度,支持百分比、像素值，默认为100%。 当未设置height属性值时，优先通过top和bottom属性值来计算原生子窗体的高度。
    	top 	原生子窗体垂直向下的偏移量，支持百分比、像素值，默认值为0px。 未设置top属性值时，优先通过bottom和height属性值来计算原生子窗体的top位置。
    	bottom 	原生子窗体垂直向上偏移量,支持百分比、像素值，默认值无值（根据top和height属性值来自动计算）。 当同时设置了top和height值时，忽略此属性值； 当未设置height值时，可通过top和bottom属性值来确定原生子窗体的高度。
    	left 	原生子窗体水平向左的偏移量，支持百分比、像素值，默认值为0px。 未设置left属性值时，优先通过right和width属性值来计算原生子窗体的left位置。
    	right 	原生子窗体水平向右的偏移量，支持百分比、像素值，默认无值（根据left和width属性值来自动计算）。 当设置了left和width值时，忽略此属性值； 当未设置width值时，可通过left和bottom属性值来确定原生子窗体的宽度。
    	margin 	原生子窗体的边距，用于定位原生子窗体的位置，支持auto，auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。
    	zindex 	原生子窗体的窗口的堆叠顺序值，拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面，拥有相同堆叠顺序的窗口后调用show方法则在前面。
    
    5、动画方式
    	slide-in-right 	slide-out-right 	新窗体从右侧进入
    	slide-in-left 	slide-out-left 	新窗体从左侧进入
    	slide-in-top 	slide-out-top 	新窗体从顶部进入
    	slide-in-bottom 	slide-out-bottom 	新窗体从底部进入
    	fade-in 	fade-out 	新窗体从透明到不透明逐渐显示
    	zoom-out 	zoom-in 	新窗体从小到大缩放显示
    	zoom-fade-out 	zoom-fade-in 	新窗体从小到大逐渐放大并且从透明到不透明逐渐显示
    	pop-in 	pop-out 	新窗体从左侧进入，且老窗体被挤压而出
    	none 	none 	无动画