參數設置
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方法則在前面。
動畫方式
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 無動畫
subNVues 覆蓋webview
this.$scope.$getAppWebview().append(this.webview);
//webview append后在創建
this.subNVue = uni.getSubNVueById('gmenu');
this.subNVue.show('slide-in-bottom', 300, () => {});
退出 或 返回到其他頁面 時候用
uni.redirectTo({
url: '/pages/home/index'
})
// 使用的頁面 通過 id 獲取 nvue 子窗體
const subNVue = uni.getSubNVueById('promote');
subNVue.show('', 250, () => {
uni.$emit('promote', this.promotionData)
});
子nvue頁面 必須是nvue
<template>
<div class="popup-share">
<image class="popup" src="/static/extension/popup.png" mode="widthFix">
<image class="popup-btn" src="/static/extension/popup-btn.png" mode="widthFix" @click="copy">
<image class="popup-close" src="/static/extension/popup-close.png" mode="widthFix" @click="subNVue.hide()">
</div>
</template>
<script>
export default {
data() {
return {
promotionData: {},
subNVue: null,
}
},
onLoad() {
// uni.getCurrentSubNVue().addEventListener("show", function() {
// console.log("subNVue子窗體已顯示！")
// });
// uni.getCurrentSubNVue().addEventListener("hide", function() {
// console.log("subNVue子窗體已隱藏！")
// });
this.subNVue = uni.getSubNVueById('promote');
uni.$on('promote', res => {
this.promotionData = res;
})
},
onUnload() {
uni.$off('promote');
},
methods: {
// 復制鏈接
copy() {
uni.setClipboardData({
data: this.promotionData.promote_url,
success: res => {
uni.showToast({
icon: 'success',
title: '復制成功',
duration: 2000
});
}
});
}
}
}
</script>
<style lang="scss" scoped>
.popup-share{
display: flex;
justify-content: center;
align-items: center;
width: 676rpx;
position: relative;
height: 800rpx;
}
.popup{
position: absolute;
left:0;
top:0;
width: 676rpx;
}
.popup-btn{
position: absolute;
top: 500rpx;
width: 396rpx;
}
.popup-close{
position: absolute;
top: 700rpx;
width: 52rpx;
}
</style>
pages.json里面
,{
"path" : "pages/player/player",
"app-plus": {
"softinputMode": "adjustResize"
},
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"subNVues": [
{
"id": "promote",
"path": "components/modal/modal-promote",
"type": "popup",
"style": {
"position": "dock",
"dock": "bottom",
"width": "676rpx",
"height": "800rpx",
"margin": "auto",
"background": "transparent"
}
}
]
}
}
}