uniapp 子窗体subNVue(解决如App中video组件上覆盖多样性内容)
1、创建.nvue后缀文件,编写原生vue组件2、在pages.json中"pages"中需要使用到subNvue的页面中配置"style": {"app-plus": {"subNVues":[{"id": "xx",唯一标识"path": "pages/subNvue页面路径不需要后缀 ","type": 'popup', 内
·
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 无动画
更多推荐
已为社区贡献20条内容
所有评论(0)